Dynamically create buttons based on input values from XML response

Question

Alright, so I have been killing myself over this for a while now. I simply want to take an XML response containing names from my arduino and then dynamically create buttons. Each button needs to say the name and have the name as its id for the GetDrink function to use to send back to the arduino. If anyone can give me some help, maybe some code to work off of it would be appreciated.

I am able to have a button call the CreateButton function to create more buttons which all work. But I need to dynamically create the buttons off of the XML response. Also, this has to be done strictly using JavaScript and 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>

Create a jsFiddle if possible please? Would be a lot easier to play around. — Tahir Ahmed
– Tahir Ahmed, Commented May 24, 2015 at 0:03
Alright so I made a quick jsFiddle, I've never used it before So i'm not sure how I would be able to sent an XML file for it. But, basically I can dynamically create buttons when I click a button. I would like it so I can read in names from the XML response and make corresponding buttons for each name received. — Tyler Fontaine
– Tyler Fontaine, Commented May 24, 2015 at 2:41

ray · Accepted Answer · 2015-05-24 04:33:22Z

2

Something like this?

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>

edited May 24, 2015 at 4:33

answered May 24, 2015 at 3:16

ray

27.3k5 gold badges31 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Tyler Fontaine Over a year ago

Beautiful! I got it to work by altering my code just a little. Thank You very much. I just have one more question you may be able to assist me with. How might I be able to have each button call the GetDrink() function when clicked and sent their respective data?

ray Over a year ago

I've updated the snippet to add an event listener to the button that calls getDrink, which extracts the value of the button from the event.target.

Tyler Fontaine Over a year ago

and to think at one point I was literally one word off. It's awesome being able to get some help from a different perspective. It works perfect. Thank you ray.

Collectives™ on Stack Overflow

Dynamically create buttons based on input values from XML response

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related