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

这是你想要达到的目标吗？

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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显示为.innerHTML的{{1}}，请将#sr连接到"["并将"]"设置为myarray .innerHTML，.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>

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

3 个答案: