Невозможно получить карточку onsubmit для отображения маркера

Question

Привет, ребята, я пытаюсь, чтобы кнопка отображала точку для отображения на карте. У меня возникли проблемы с получением обработчика кликов в правильной области.

Сейчас я определяю мои JS, как так, чтобы отобразить карту и определить обработчик:

window.onload = function(){ 

(function(){ 

L.mapbox.accessToken = 'pk.eyJ1IjoidHJlYmVrMSIsImEiOiJjaWo0c2ZtYzYwMDN3dGhtMzhremFtMW8wIn0.dBWgVtzgwok3cCi7p5euCg'; 
var container = document.getElementById('container'); 

var map = L.mapbox.map('map', 'mapbox.streets').setView([37.7749300,-122.4194200], 12); 

map.featureLayer.setGeoJSON(geojson); 

// var newMarkerGroup = new L.LayerGroup(); 
    map.on('click', function(e){ 
     var newMarker = new L.marker(e.latlng).addTo(map);  
    }); 

return{ 

    mboxsubmit: function(event){ 

     event.preventDefault(); 
     var query = document.getElementById('mboxplace').value; 

     var map = document.getElementById('map'); 
     var newMarker = new L.marker({lat: 37.7749300, lng: -122.4194200 }).addTo(map); 

     document.getElementById('mboxplace').value = ''; 
    } 


}; 

})(); 


} 

В HTML у меня есть форма:

<div id='container'> 

     <div id='map'></div> 
     <br/> 
     <form onsubmit="mboxsubmit(event)" name="mboxform" id="mboxform"> 
      Search: <input id="mboxplace" name="mboxtext" type="text placeholder ="input a place to locate"> 
      <input id="mboxsub" type="submit"></input> 
     </form> 

     <a href="/"><button>Go Back to Home Page</button></a> 
     <br/> 
    </div> 

Независимо от того, что я не могу получить mboxsubmit. Я попытался использовать контейнер как область закрытия, но это тоже не сработало. Кто-нибудь знает, как это сделать?

Answer 1

Во-первых, в вашем HTML есть синтаксическая ошибка. Вы забыли закрывающую кавычку для атрибута type:

<input id="mboxplace" name="mboxtext" type="text placeholder ="input a place to locate"> 

Должен быть:

<input id="mboxplace" name="mboxtext" type="text" placeholder ="input a place to locate"> 

Действительная проблема заключается в том, что ваша функция возвращает объект, который не получает назначенный. Вам нужно присвоить его переменной в вашем глобальном масштабе, если вы хотите получить доступ к нему в вашем onsubmit событие:

window.onload = function() { 
    // Assign return object 
    window.obj = (function() { 
     return { 
      mboxsubmit: function (event) { 
       alert('Fire!'); 
      } 
     }; 
    })(); 
} 

Теперь вы можете использовать его по телефону obj.mboxsubmit:

<form onsubmit="obj.mboxsubmit()"></form>