gpt4 book ai didi

javascript - 根据来自 XML 响应的输入值动态创建按钮

转载 作者:太空狗 更新时间:2023-10-29 16:40:26 25 4
gpt4 key购买 nike

好吧,我已经为此苦恼了一段时间。我只是想从我的 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>

最佳答案

是这样的吗?

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>

关于javascript - 根据来自 XML 响应的输入值动态创建按钮,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30418656/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com