Eingabe Marker durch Formularfeld hinzugefügt

function.js

@@ -80,7 +80,7 @@ function addentry(){
 
 
  
- var map = L.map('map').setView([53.463, 9.973], 12);
+ let map = L.map('map').setView([53.463, 9.973], 12);
 
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
@@ -91,32 +91,33 @@ function addentry(){
 
 
 //when the button gets clicked, the informations out of the input-field get displayed in the div "coordinates_output"
-document.querySelector("#buttoncoordinates").onclick = function() {
+//document.querySelector("#buttoncoordinates").onclick = function()
+function get_coordinates() {
     //document.querySelector(".coordinates_output").innerHTML = document.querySelector("#coordinates").value;
     //marker1 = L.marker([coordinates]).addTo(map);
     //document.getElementById("case").innerHTML = marker1;
-    //console.log(L.marker([coord]));
-
-    let coordinates = L.marker([document.querySelector("#coordinates").value]);
-    let marker1 = coordinates.addTo(map);
-    
+    //console.log(L.marker([coordinates]));
+    //let coord = document.getElementById("coordinates").value;
+    let coordinates = document.getElementById("coordinates").value;
+    let coordinates_sep = coordinates.split(","); 
+    let marker1 = L.marker(coordinates_sep).addTo(map);
     
-
 }
 //let coordinate = document.querySelector("coordinates").value;
 //marker1.addTo(map); ---> wie kann ich eine Variable definieren, 
 //------------------------die auch außerhalb einer Funktion gilt?
-var coord1 = "53.468336, 9.960204";
+//var coord1 = "53.468336, 9.960204";
 
 
 
  //Marker get added
- /*var marker1 = L.marker([53.468336, 9.960204]).addTo(map);
+ /*var koordinaten = ["53.468336", "9.960204"];
+ var marker1 = L.marker(koordinaten).addTo(map);
  var marker2 = L.marker([53.459333, 10.017835]).addTo(map);
  var marker3 = L.marker([53.444, 9.947]).addTo(map);
  var marker4 = L.marker([53.452, 10.020]).addTo(map);*/
 
- var latlngs = Array()
+ let latlngs = Array()
  /*var latlngs = [
      [53.453, 10.017],
      [53.462, 9.883],
@@ -132,7 +133,7 @@ var coord1 = "53.468336, 9.960204";
 
  //From documentation http://leafletjs.com/reference.html#polyline
  // create a red polyline from an arrays of LatLng points
- var polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
+ let polyline = L.polyline(latlngs, {color: 'red'}).addTo(map);
 
  // zoom the map to the polyline
  //map.fitBounds(polyline.getBounds());

index.html

@@ -85,7 +85,7 @@
         <div class="section-container">
             <form>
                 <input type="text" id="coordinates" name="koordinaten" placeholder="Gib hier deine Koordinaten ein">
-                <button onclick="" id="buttoncoordinates" type="button">Koordinaten hinzufügen</button>
+                <button onclick="get_coordinates()" id="buttoncoordinates" type="button">Koordinaten hinzufügen</button>
             </form>
             <div class="coordinates_output">
             </div>