Creare dinamicamente pulsanti in base ai valori di input dalla risposta XML

Va bene, quindi mi sto uccidendo da un po 'di tempo. Voglio semplicemente prendere una risposta XML contenente nomi dal mio arduino e quindi creare dinamicamente i pulsanti. Ogni pulsante deve pronunciare il nome e avere il nome come ID per la funzione GetDrink da utilizzare per inviare nuovamente all'arduino. Se qualcuno può darmi un aiuto, forse un codice per risolverlo sarebbe apprezzato.Creare dinamicamente pulsanti in base ai valori di input dalla risposta XML

Sono in grado di avere un pulsante chiama la funzione CreateButton per creare più pulsanti che funzionano tutti. Ma ho bisogno di creare dinamicamente i pulsanti fuori dalla risposta XML. Inoltre, questo deve essere fatto rigorosamente utilizzando JavaScript e HTML.

<!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>

fonte

2015-05-23 Tyler Fontaine

Creare un jsFiddle, se possibile, per favore? Sarebbe molto più facile giocare. –

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

OK, quindi ho fatto un rapido jsFiddle, non l'ho mai usato prima Quindi non sono sicuro di come potrei inviare un file XML per questo. Ma fondamentalmente posso creare dinamicamente i pulsanti quando clicco su un pulsante. Mi piacerebbe che io possa leggere i nomi della risposta XML e creare i pulsanti corrispondenti per ciascun nome ricevuto. –

Qualcosa di simile?

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>

fonte

2015-05-24 03:16:18 ray

Bello! L'ho fatto funzionare alterando il mio codice solo un po '. Grazie mille. Ho solo un'altra domanda con cui potresti essere d'aiuto. Come potrei essere in grado di fare in modo che ogni pulsante chiami la funzione GetDrink() quando si fa clic e si inviano i rispettivi dati? –

Ho aggiornato lo snippet per aggiungere un listener di eventi al pulsante che chiama getDrink, che estrae il valore del pulsante da event.target. – ray

e pensare ad un certo punto mi è stata letteralmente una parola fuori. È fantastico poter ottenere aiuto da una prospettiva diversa. Funziona perfettamente. Grazie, raggio. –

Creare dinamicamente pulsanti in base ai valori di input dalla risposta XML

risposta

Problemi correlati