Question

我正在编写代码，其中所用按钮的总数将在运行时确定。每个按钮的id按钮必须不同/唯一。因为按钮的数量可以是可变的，所以我认为需要某种循环，id应该由另一个变量设置。

这些行应该是html中出现的行：

<button class="btn" value="1" id="1">button 1</button>
<button class="btn" value="2" id="2">button 2</button>

....依此类推。

到目前为止，这是我的JS：

var total_button = 4;
var btn_id       = 1;
var btn_value    = 1;

for(i = 1; i <= 4; i++) {
    document.getElementById("list").innerHTML = 
      '<button class="btn" id="' + btn_id + '" value="' + btn_value + '">button 1</button>';
    btn_id++;
    btn_value++;
}

预期结果：

<div id="list">
    <button class="btn" value="1" id="1">button 1</button>
    <button class="btn" value="2" id="2">button 2</button>
    <button class="btn" value="3" id="3">button 3</button>
    <button class="btn" value="4" id="4">button 4</button>
</div>

要实现不同的/唯一的id，我应该怎么做？

Answer 1

这是您需要的吗？

var list = document.getElementById('list');
var totalButtons = 4;

for (var i = 0; i < totalButtons; i++) {
  list.innerHTML += `<button id="id-${i}">Button ${i}</button>`;
}

<div id="list"></div>

Answer 2

使用JavaScript创建DOM元素：

var button = document.createElement("BUTTON");
button.innerHTML = "YOUR TEXT"
document.body.appendChild(button);
button.setAttribute("id","btnid" + i); // i is any varibale

id可以是变量值。使用循环或其他所需的循环。

Answer 3

尝试

for(i=1;i<=4;i++)
{
    list.innerHTML += 
      `<button class="btn" id=${i}  value=${i}>button ${i}</button>`;
}

<div id="list"></div>

通过变量值设置按钮或div的ID

3 个答案: