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

Posted 2023-05-07

【中文标题】Javascript：将按钮ID分配为innerhtml中的数字

【英文标题】：Javascript: assigning button id as a number inside of an innerhtml

【发布时间】：2015-06-01 11:29:08

【问题描述】：

我遇到了这个问题，在使用 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;

当我真的希望它成为 innerHTML 时，按钮 ID 最终成为“buttontexto”。可能是您不能在innerHTML 中包含另一个innerHTML。 任何提示或修复将不胜感激

【问题讨论】：

我认为问题不明确

你想要 3 个 id 为 1,2 and 3 的按钮和文字也一样

我想我可以看到您要执行的操作，但 id buttontotext 并不存在。 tabletextvar 没有构建元素/html。它将编写它并为您设置需要将其写入页面的元素的 innerHTML。我建议考虑为此创建动态元素。

【参考方案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

【讨论】：

这很好，正是我真正需要的，但我确实需要将按钮创建放在 tabletext 中，否则按钮不在我想要的位置。反正有这个？

@Watulio 按钮在里面 tabletext - jsfiddle.net/arunpjohny/m2q93z03/2

我没问对，对不起。我的意思是我已经在表格文本中有东西了。示例：tabletextvar += "

"; tabletextvar += valorParcial[xq]; tabletextvar += "";这是我在 tabletextvar 里面的东西，我希望每个按钮都与每一行正确对齐

我现在拥有的屏幕截图gyazo.com/57eb925506722646481e7b5e898a0bff 有没有办法让那里的按钮像你所做的那样工作，但我唯一缺少的是将它们放在 tabletext 中连同桌子的其余部分

@Watulio 你想在同一行有 2 个按钮吗？