document.getElementById 类适用于整个数组而不是每个元素

Question

<p><span id="sr" class="btn">elements of the array</span></p>

for(var i = 0; i < myarray.length; i++)
{
	var sr = (function(val) {
        btn = document.createElement('button');
        btn.data = val;
        btn.innerHTML = val;
        btn.addEventListener('click', checkAnswer);
        document.body.appendChild(btn);
		return btn.data = val;
    })//(myarray[i]);
document.getElementById("sr").innerHTML = myarray;
}

使用此代码，数组的元素将显示在 html 范围中。我希望每个元素都显示为一个按钮，如类"btn"中所定义的那样。但是，该类会更改整个数组的样式，而不是单个按钮。定义每个按钮样式的正确方法是什么？

我试过document.getElementById("sr").innerHTML = myarray.class="btn";.它不起作用。绝对不是正确的语法。知道吗？

Answer 1

这是你想要实现的吗？

let container = document.getElementById('sr');
let array = ['element1', 'element2', 'element3'];
function checkAnswer () {
  console.log('Selected answer: ', this.textContent);
}
for (let i = 0; i < array.length; i++) {
  let button = document.createElement('button');
  button.textContent = array[i];
  button.addEventListener('click', checkAnswer);
  container.appendChild(button);
}

<p><span id="sr" class="btn"></span></p>

Answer 2

如果我

理解正确，您想将btn类添加到带有myarray元素的动态创建的按钮中。

定义每个按钮样式的正确方法是什么？

我尝试了document.getElementById("sr"(.innerHTML = myarray.class="btn";

您可以使用element.classList.add('your-class');

var myarray = ["Array", "elements"]; //let's say
for (var i = 0; i < myarray.length; i++) {
  var sr = (function(val) {
    btn = document.createElement('button');
    btn.data = val;
    btn.innerHTML = val;
    btn.classList.add("btn")
    btn.addEventListener('click', checkAnswer);
    document.body.appendChild(btn);
    return btn.data = val;
  })(myarray[i]);
  //document.getElementById("sr").innerHTML = myarray;//I don't know why this line here?
}
function checkAnswer(e){
}

Answer 3

使用 Element.dataset 而不是创建 .data 属性。将i传给IIFE。如果尝试将数组myarray显示为#sr的.innerHTML，请在.innerHTML处将"["连接到myarray设置的开头，"]"连接到设置的开头，.innerHTML Array转换为String。

如果尝试将创建的元素追加到#sr，请不要将元素追加到document.body，而是#sr。

function checkAnswer() {
  console.log(this.dataset.value)
}
var myarray = [1, 2, 3];
for (var i = 0; i < myarray.length; i++) {
  (function(val) {
    var btn = document.createElement('button');
    btn.dataset.value = val;
    btn.className = "btn"; // set `btn` `.className` to `"btn"`
    btn.innerHTML = val;
    btn.addEventListener('click', checkAnswer);
    document.body.appendChild(btn);
    // document.getElementById("sr").appendChild(btn);
  })(i);
}
document.getElementById("sr").innerHTML = "[" + myarray + "]";

<p><span id="sr" class="btn">elements of the array</span></p>