Javascript：将按钮 ID 分配为 innerhtml 中的数字

Question

我遇到了这个问题，在使用 innerHTML 时，我似乎无法将 "xq" 的数字作为按钮的 ID。这是代码：

for (var xq = 0; xq < 3; xq++) {
    var pass = xq;
    tabletextvar = '<button id="buttontexto"; onclick="cancelObject(this.id);">Button</button>'
    document.getElementById("buttontexto").innerHTML = pass;
}

document.getElementById("tabletext").innerHTML = tabletextvar;

按钮 ID 最终变成了 "buttontexto"，而我真的希望它是什么 innerHTML。可能是您不能在 innerHTML 中包含另一个 innerHTML。任何提示或修复将不胜感激

Answer 1

如果您想拥有 3 个 ID 为 1,2 和 3 的按钮，那么您需要附加它们，只需在循环内使用一个变量即可覆盖它，当循环结束时它将具有最后一个值。您需要有一个连接的字符串。

var buttons = [];
for (var xq = 0; xq < 3; xq++) {
    buttons.push('<button id="',xq,'" onclick="cancelObject(this.id);">',xq,"</button>")
}

document.getElementById("tabletext").innerHTML = buttons.join('');

演示：Fiddle

Javascript：将按钮 ID 分配为 innerhtml 中的数字

Javascript: assigning button id as a number inside of an innerhtml

javascript

for-loop

button

innerhtml