Dynamicznie twórz przyciski oparte na wartościach wejściowych z odpowiedzi XML

W porządku, więc od pewnego czasu zabijam się nad tym. Po prostu chcę wziąć odpowiedź XML zawierającą nazwy z mojego arduino, a następnie dynamicznie tworzyć przyciski. Każdy przycisk musi wypowiadać nazwę i mieć nazwę jako jej identyfikator dla funkcji GetDrink, której należy użyć do wysłania z powrotem do arduino. Jeśli ktokolwiek może mi pomóc, być może uda mi się uzyskać kod do pracy.Dynamicznie twórz przyciski oparte na wartościach wejściowych z odpowiedzi XML

Jestem w stanie wywołać funkcję przycisku CreateButton, aby utworzyć więcej przycisków, które działają. Ale muszę dynamicznie tworzyć przyciski poza odpowiedzią XML. Musi to być również ściśle wykonywane przy użyciu JavaScript i 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>

Źródło

2015-05-23 Tyler Fontaine

Tworzenie jsFiddle jeśli to możliwe proszę? Byłoby o wiele łatwiej się bawić. –

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

W porządku, więc zrobiłem szybki jsFiddle, nigdy wcześniej go nie użyłem Więc nie jestem pewien, jak byłbym w stanie wysłać plik XML dla niego. Ale zasadniczo mogę dynamicznie tworzyć przyciski po kliknięciu przycisku. Chciałbym, abym mógł odczytać nazwy z odpowiedzi XML i wykonać odpowiednie przyciski dla każdej otrzymanej nazwy. –

Coś takiego?

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>

Źródło

2015-05-24 03:16:18 ray

Piękne! Mam go do pracy, zmieniając trochę mój kod. Dziękuję Ci bardzo. Mam jeszcze jedno pytanie, z którym możesz mi pomóc. W jaki sposób mogę mieć każdy przycisk wywoływania funkcji GetDrink() po kliknięciu i wysłaniu odpowiednich danych? –

Zaktualizowałem fragment kodu, aby dodać detektor zdarzeń do przycisku wywołującego getDrink, który wyodrębnia wartość przycisku z pliku event.target. – ray

i myśleć w pewnym momencie byłem dosłownie jednym słowem. To niesamowite, że mogę uzyskać pomoc z innej perspektywy. Działa idealnie. Dziękuję Ray. –

Dynamicznie twórz przyciski oparte na wartościach wejściowych z odpowiedzi XML

Odpowiedz

Powiązane problemy