Question

好吧，所以我现在一直在为此而自杀。我只是想从我的arduino中获取包含名称的XML响应，然后动态创建按钮。每个按钮都需要说出名称，并将名称作为GetDrink函数的id，用于发送回arduino。如果有人可以给我一些帮助，也许可以使用一些代码来解决它。

我可以通过按钮调用CreateButton函数来创建更多按钮，这些按钮都可以正常工作。但我需要动态创建XML响应的按钮。此外，这必须严格使用JavaScript和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>

Answer 1

这样的东西？

＆＃13;

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);
}

＆＃13;

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

＆＃13;

根据XML响应的输入值动态创建按钮

1 个答案: