用Javascript附加HTML元素，看不到元素？

Question

我对javascript还是个新手，所以预计会看到很多糟糕的编程实践。。。

function addButton(name, state) {
numButtons += 1;
if (name === '') {
var i = 0;
while(buttonStates.hasOwnProperty("button" + i) === true) i++;
name = "button" + i;
}
document.getElementById("buttonTable").innerHTML +=
"<tr>
<td>
<p id="buttonName" + numButtons + "" class="buttonName">" + name + "</p>
</td><td>
<button id="" + name + "" onclick="setButton(this, 'toggle')" class="button">OFF</button>
</td>
</tr>";
//===IMPORTANT AREA 1==========================================================//
//setTimeout(function(){setButton(document.getElementById(name), state)}, 0); //works
setButton(document.getElementById(name), state); //doesn't work, no change
//=============================================================================//
}
function setButton(elem, state) {
//this is where the button's colors are set to light colors
//notice how I am using elem.style.backgroundColor
if(String(state) === 'toggle') state = !buttonStates[elem.id];
if (String(state) === 'true') {
buttonStates[elem.id] = true;
elem.style.backgroundColor = "rgb(112,192,112)";
elem.textContent = 'ON';
} else {
buttonStates[elem.id] = false;
elem.style.backgroundColor = "rgb(255,128,128)";
elem.textContent = 'OFF';
}

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
document.getElementById("demo").innerHTML = this.responseText;
//===IMPORTANT AREA 2==========================================================//
if (buttonStates[elem.id] === true) {
elem.style.backgroundColor = 'green'; //doesn't work, no change. Notice how I am, again, using elem.style.backgroundColor
//document.getElementById(elem.id).style.backgroundColor = 'green'; //works
} else {
elem.style.backgroundColor = 'red';
}
//=============================================================================//
} else {
document.getElementById("demo").innerHTML = "readyState: " + this.readyState + "<br>status: " + this.status;
}
};
xhttp.open("POST", "/buttonToggle", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send(elem.id + "=" + buttonStates[elem.id]);
}

因此，基本上我在addButton()中添加了一个HTML按钮，它调用setButton(()并将新元素传递给该函数。在setButton()中，它首先将元素的颜色设置为浅绿色或浅红色，表示服务器尚未更新按钮的状态。这部分工作正常，按钮的颜色确实发生了变化。但是，在服务器请求的回调函数中，按钮拒绝以与以前完全相同的方法更改颜色。我已经找到了解决方法(要么使用时间为0ms的setTimeout()，要么使用传递的元素再次从文档中获取元素)，但我想知道为什么会发生这种情况。这似乎只是回调函数中的一个问题。我已经验证了回调函数是否执行，以及更改颜色的代码是否执行。

顺便说一句，如果我有多个按钮，最后一个按钮可以正常工作，而之前的所有按钮都不工作，它们的颜色仍然是浅绿色或浅红色。注意按钮0-5都是浅色，但按钮6是实心的，为什么？！？

Answer 1

HTML文档上的不同元素应该具有不同的唯一id。你们所有的按钮都有相同的id，所以只有最后一个在工作。

像使用name一样使用'button' + i使您的id唯一。

Answer 2

好吧，我不知道当前的错误以及为什么您的代码不起作用。也许我们需要查看整个代码？

但您肯定在搜索关键字"eventloop"。当您的代码在超时运行时工作时，您的代码需要异步运行。点击此处查看更多详细信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop

如果你发布了整个代码，我会再看一次，但也许这已经有帮助了。如果这是你编程的第一步，那么你做得很好！