kostenloser Webspace werbefrei: lima-city

neue divs erzeugen und an script übergeben

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   kill-a-teddy

   

   kill-a-teddy hat kostenlosen Webspace.

   10:30, 22.10.2012

   Hallo Leute,
   
   In der Google Maps Api v3 ist es möglich Strecken nach Wegpunkten zu zeichnen. Das ganze funktioniert mit folgendem Code:
   
   

   function calcRoute() {
             var start = document.getElementById('start').value;
             var end = document.getElementById('end').value;
             var waypts = [];
             var checkboxArray = document.getElementById('ueber');
                 waypts.push({
                     location:checkboxArray.value,
                     stopover:true});
   
             var request = {
                 origin: start,
                 destination: end,
                 waypoints: waypts,
                 optimizeWaypoints: true,
                 travelMode: google.maps.DirectionsTravelMode.DRIVING
             };
             directionsService.route(request, function(response, status) {
               if (status == google.maps.DirectionsStatus.OK) {
                 directionsDisplay.setDirections(response);
                 var route = response.routes[0];
                 var summaryPanel = document.getElementById('directions_panel');
                 summaryPanel.innerHTML = '';
               }
             });
           }

   
   
   Es ist vom original abgeändert. Die "var checkboxArray" ist das Ergebnis eines inputs, das einen Wegpunkt darstellen soll. Bis jetzt funktioniert das Script, aber auch nur, weil ich nur einen Wegpunkt habe. Jetzt hab ich mir gedacht, vielleicht will ich ja wo anders langfahren und über eine andere Stadt, deshalb bau ich in Javascript eine Funktion, welche mir eine neue div aufmacht:
   
   

   function divaufmachen(element){
       	  if(document.getElementById(element).style.display == 'none')
       	   document.getElementById(element).style.display = 'block';
       	  else
       	        document.getElementById(element).style.display = 'none';
       	 }

   
   
   In HTML rufe ich das dann so auf:
   
   

   <input type="text" id="ueber" name="ueber" min="3" max="200" onchange="divaufmachen('aufmachen');" placeholder="Kiel">
   
       <div id="aufmachen" style="display:none;">
       <input type="text" id="ueber" name="ueber" min="3" max="200" onchange="calcRoute();" placeholder="Kiel">
       </div>

   
   
   Jetzt kommt das eigentliche Problem: das zweite Input Feld muss für die Funktion ja "ueber" heißen, aber dann bekommt das Script zwei Werte und macht gar nix, weil das total verwirrt ist. Ich muss also eine Schleife haben, wo ich die einzelnen Werte von "ueber" abfrage, obwohl das kein array ist. Außerdem will ich nach der eingabe des zweiten div's, dass eine neue erzeugt wird, damit ich beliebig viele WegPunkte einzeichnen kann...
   
   Wie genau mache ich das nun?

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. syberpsace

   

   syberpsace hat kostenlosen Webspace.

   10:54, 22.10.2012

   Ich verstehe zwar nicht ganz was du meinst, aber hier mal ein Lösungsansatz der funktionieren könnte:
   Nehmen wir mal an du hast 4 Wegpunkte (Start, WP1, WP2, Ziel). Dann kannst du dir die Route einfach aufteilen lassen (Start->WP1; WP1->WP2; WP2->Ziel). Dann zeichnest du diese drei Routen einfach (wenn möglich in der gleichen Farbe) ein.
   
   Falls ich dich falsch verstanden habe, und es dir einfach nur darum geht an die Daten in den "ueber"-Feldern zu kommen, schau dir mal getElementsByName() an.
   
   Und noch ein kleiner Tipp am rande: nenn die Variable checkboxArray doch irgendwie anders, denn da sind weit und breit keine Checkboxen zu sehen
   
   mfg
4. Autor dieses Themas

   kill-a-teddy

   

   kill-a-teddy hat kostenlosen Webspace.

   11:07, 22.10.2012

   syberpsace schrieb:
   Ich verstehe zwar nicht ganz was du meinst, aber hier mal ein Lösungsansatz der funktionieren könnte:
   Nehmen wir mal an du hast 4 Wegpunkte (Start, WP1, WP2, Ziel). Dann kannst du dir die Route einfach aufteilen lassen (Start->WP1; WP1->WP2; WP2->Ziel). Dann zeichnest du diese drei Routen einfach (wenn möglich in der gleichen Farbe) ein.
   
   Falls ich dich falsch verstanden habe, und es dir einfach nur darum geht an die Daten in den "ueber"-Feldern zu kommen, schau dir mal getElementsByName() an.
   
   Und noch ein kleiner Tipp am rande: nenn die Variable checkboxArray doch irgendwie anders, denn da sind weit und breit keine Checkboxen zu sehen
   
   mfg

   
   
   Danke :) Hat mir schon mal weiter geholfen...
   Jetzt brauch ich nur noch eine Funktion, die beim input in eine Textbox eine neue div erstellt... Hast du da auch was für mich?

5. syberpsace

   

   syberpsace hat kostenlosen Webspace.

   11:25, 22.10.2012

   Dazu gäbe es die Funktion createElement().
   Dem damit erzeugten Element kannst du dann wie gehabt Eigenschaften (display=block usw.) zuweisen.
   
   Codebeispiel (ungetestet):
   

   var div = document.createElement('div');
   var textbox = document.createElement('input');
   textbox.type = 'text';
   textbox.name = 'ueber';
   div.appendChild(textbox);
   //div muss dann noch per appendChild an die entsprechende Position gehängt werden.

   
   
   mfg

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?