Строка Javascript, неожиданно превращающаяся в объект

Question

Я работал над простым проектом с использованием API Карт Google. Моему другу нужна карта посетителя для его веб-сайта, где посетители могут поставить отметку, отражающую их местоположение. Эти метки также связаны с такими данными, как имя, сообщение и т. Д. Эти данные должны отображаться в информационном окне при нажатии метки.

Пока все работает довольно хорошо, но я сталкиваюсь с ошибкой, которая поставила меня в тупик.

Когда пользователь ставит новую точку, вызывается функция для генерации формы, специфичной для этого объекта.

function setupForm(id){
    var content='<div class="gdform">'+
            '<form id='+id+'>'+
            '<ul>'+
            '<li><input type="text" id="userName" value="name" onfocus="value=\'\'"/></li>'+
            '<li><textarea rows ="15" cols="50" wrap="hard"></textarea></li>'+
            '</ul>'+
            '<input type="button" value="submit" onclick="markers.'+id+'.setData()"/>'+
            '<input type="button" value="cancel" onclick="setTimeout(function(){removeMark('+id+')}, 100)"/>'+
            '</form>'+
            '</div>';
return content;

}

Где id - уникальный идентификатор для каждой отметки на карте. Метки хранятся в хеш-таблице и могут ссылаться с этим идентификатором.

Проблема здесь исходит от кнопки отмены. При нажатии он должен закрыть информационное окно, удалить маркер с карты и удалить маркер из хеш-таблицы. Для этого он вызывает функцию removeMark, которая выглядит следующим образом:

function removeMark(id){
   infoWindow.close()
   markers.id.mark.setMap(null);
   delete markers.id;

}

Здесь, однако, я получаю сообщение об ошибке типа, сообщающее, что он не может прочитать метку свойства undefined.

В попытке отладки кода я установил несколько точек останова, одну в функции setupForm, а другую в removeMark. Проходя по коду, я заметил, что в setupForm консоль js идентифицирует id как строку. Однако, когда в removeMark консоль js сообщает мне, что id внезапно стал объектом.

Я не смог понять, почему это должно быть. Вот весь код:

http://jsfiddle.net/39vKm/

Спасибо за помощь!

Answer 1

Хорошо ... с вашим кодом есть три проблемы ...

Прежде всего, вы пропускаете одинарные кавычки вокруг идентификатора в десятичной кнопке onclick на кнопке отмены.Во-вторых, вам нужно вернуть false из функции removeMark и вернуть removeMark в событии onclick на кнопке ... (нет необходимости в тайм-ауте)

CODE:

function setupForm(id){
    var content='<div class="gdform">'+
                '<form id='+id+'>'+
                '<ul>'+
                '<li><input type="text" id="userName" value="Whats your name?" onfocus="value=\'\'"/></li>'+
                '<li><textarea rows ="15" cols="50" wrap="hard"></textarea></li>'+
                   '</ul>'+
                '<input type="button" value="submit" onclick="markers.'+id+'.setData()"/>'+
                '<input type="button" value="cancel" onclick="return removeMark(\''+id+'\')"/>'+
                '</form>'+
                '</div>';
    return content;

}

В-третьих, при удалении метки необходимо ссылаться на маркер, используя скобки в массиве ...

function removeMark(id){
    infoWindow.close()
    markers[id].mark.setMap(null);
    delete markers[id];
    return false;
}

Обновленная скрипта: http://jsfiddle.net/gislikonrad/39vKm/5/