Dynamisch Schaltflächen basierend auf Eingabewerten aus der XML-Antwort erstellen

In Ordnung, also habe ich mich schon eine ganze Weile über mich selbst hinweggeschlagen. Ich möchte einfach eine XML-Antwort mit Namen aus meinem Arduino nehmen und dann dynamisch Schaltflächen erstellen. Jede Schaltfläche muss den Namen enthalten und den Namen als ID für die GetDrink-Funktion haben, die verwendet werden soll, um an das Arduino zurückzusenden. Wenn mir jemand Hilfe geben könnte, wäre vielleicht ein Code, um davon zu arbeiten, zu schätzen.Dynamisch Schaltflächen basierend auf Eingabewerten aus der XML-Antwort erstellen

Ich bin in der Lage, einen Button die CreateButton-Funktion aufzurufen, um mehr Schaltflächen zu erstellen, die alle funktionieren. Aber ich muss dynamisch die Knöpfe aus der XML-Antwort erstellen. Auch dies muss streng mit JavaScript und HTML erfolgen.

<!DOCTYPE html> 
<html> 
    <head> 
     <title>The AutoBar</title> 
     <script> 
     // Drinks 
     strDRINK1 = ""; 

     function GetArduinoIO() 
     { 
      nocache = "&nocache=" + Math.random() * 1000000; 
      var request = new XMLHttpRequest(); 
      request.onreadystatechange = function() 
      { 
       if (this.readyState == 4) { 
        if (this.status == 200) { 
         if (this.responseXML != null) { 
          var count; 
          var num_an = this.responseXML.getElementsByTagName('alcohol').length; 
          for (count = 0; count < num_an; count++) { 
           document.getElementsByClassName("AlcStatus")[count].innerHTML = 
            this.responseXML.getElementsByTagName('alcohol')[count].childNodes[0].nodeValue; 
          } 
         } 
        } 
       } 
      } 

      request.open("GET", "ajax_inputs" + strDRINK1 + nocache, true); 
      request.send(null); 
      setTimeout('GetArduinoIO()', 1000);**strong text** 
      strDRINK1 = ""; 

     } 
     function GetDrink(clicked_id) 
     { 
      strDRINK1 = "&" + clicked_id; 
      document.getElementById("AlcStatus").innerHTML = "Your " + clicked_id + " is being made"; 
     } 


     function CreateButton(Drink_Name) 
     { 
      myButton = document.createElement("input"); 
      myButton.type = "button"; 
      myButton.value = Drink_Name; 
      placeHolder = document.getElementById("button"); 
      placeHolder.appendChild(myButton); 
      myButton.id = Drink_Name; 
      myButton.onclick = function() 
      { 
       strDRINK1 = "&" + myButton.id; 
       document.getElementById("AlcStatus").innerHTML = "Your " + myButton.id + " is being made"; 
      } 
     } 


    </script> 
    <style> 
     .IO_box { 
      float: left; 
      margin: 0 20px 20px 0; 
      border: 1px solid blue; 
      padding: 0 5px 0 5px; 
      width: 320px; 
     } 
     h1 { 
      font-size: 320%; 
      color: blue; 
      margin: 0 0 10px 0; 
     } 
     h2 { 
      font-size: 200%; 
      color: #5734E6; 
      margin: 5px 0 5px 0; 
     } 
     p, form, button { 
      font-size: 180%; 
      color: #252525; 
     } 
     .small_text { 
      font-size: 70%; 
      color: #737373; 
     } 
    </style> 
    </head> 
    <body onload="GetArduinoIO()" BGCOLOR="#F5F6CE"> 
     <p> <center><img src="pic.jpg" /></center><p>  


     <div class="IO_box"> 
      <div id="button"></div> 
     </div> 

     <div class="IO_box"> 
      <h2><span class="AlcStatus">...</span></h2> 

     </div> 

     <div> 
      <button onclick="location.href='Edit_Bar.htm'">Edit Bar Menu</button> 
     <div> 
    </body> 
</html>

Quelle

2015-05-23 Tyler Fontaine

eine jsFiddle bitte, wenn möglich, erstellen? Wäre viel einfacher zu spielen. –

https://jsfiddle.net/gpunjedn/3/ –

In Ordnung, also machte ich eine schnelle jsFiddle, ich habe es vorher noch nie benutzt Also ich bin mir nicht sicher wie ich eine XML Datei dafür senden könnte. Aber im Grunde kann ich dynamisch Schaltflächen erstellen, wenn ich auf eine Schaltfläche klicke. Ich würde es mögen, also kann ich Namen von der XML-Antwort einlesen und entsprechende Knöpfe für jeden erhaltenen Namen machen. –

So ähnlich?

var xml = "<items><alcohol>Bourbon</alcohol><alcohol>Gin</alcohol><alcohol>Whiskey</alcohol></items>"; 
 

 

 
var parser = new DOMParser(); 
 
var dom = parser.parseFromString(xml, "text/xml"); 
 

 
var alcohol = dom.querySelectorAll('alcohol'); 
 

 
function getDrink(event) { 
 
    alert(event.target.value); 
 
} 
 

 
function makeButton(value) { 
 
    var b = document.createElement('button'); 
 
    b.innerHTML = value; 
 
    b.value = value; 
 
    b.id = value; 
 
    b.addEventListener('click', getDrink); 
 
    return b; 
 
} 
 

 
var list = document.getElementById('buttons'); 
 

 
for(var i = 0; i < alcohol.length; i++) { 
 
    var b = makeButton(alcohol[i].firstChild.nodeValue); 
 
    var li = document.createElement('li'); 
 
    li.appendChild(b); 
 
    list.appendChild(li); 
 
}

<ul id="buttons"></ul>

Quelle

2015-05-24 03:16:18 ray

Schön! Ich habe es funktioniert, indem ich meinen Code ein wenig geändert habe. Vielen Dank. Ich habe nur noch eine Frage, bei der Sie mir vielleicht behilflich sein können. Wie kann ich in der Lage sein, mit jeder Schaltfläche die Funktion GetDrink() aufrufen zu können, wenn ich darauf klicke und die entsprechenden Daten sende? –

Ich habe das Snippet aktualisiert, um der Schaltfläche, die getDrink aufruft, einen Ereignis-Listener hinzuzufügen, der den Wert der Schaltfläche aus dem event.target extrahiert. – ray

und an einem Punkt zu denken, war ich buchstäblich ein Wort weg. Es ist großartig, etwas Hilfe aus einer anderen Perspektive zu bekommen. Es funktioniert perfekt. Danke, Ray. –

Dynamisch Schaltflächen basierend auf Eingabewerten aus der XML-Antwort erstellen

Antwort

Verwandte Themen