Javascript如何在单击显示为按钮的数组元素时启动事件

Question

我用给定的项目填充数组并将其显示为按钮。 用户应单击其中一个按钮。 根据按钮的不同，他单击答案的方式可能有所不同。 这是我到目前为止所做的：

 var1 = "1"; var2 = "2"; var3 = "3"; var4 = "4"; var myarray=[var1,var2,var3,var4]; for(var i = 0; i < myarray.length; i++) { document.write("<div>"); { document.write("<input type='button' value='" + myarray[i] + "'/>"); } document.write("</div>"); } //add click handler with check answer var checkAnswer = document.querySelector('input[type=object]'); var value = checkAnswer.value; var btn = document.querySelector('input[type=object][value=Check]'); btn.onclick = function () { value = checkAnswer.value; if (value == var4) { display.innerHTML = "good answer"; } else { display.innerHTML = "wrong answer"; return false; }}; 

任何想法如何工作？

Answer 1

var arr = [1, 2, 3, 4];
for(var i=0; i < arr.length; i++) {
    (function(val) {
        btn = document.createElement('button');
        btn.data = val;     // assign the value to compare to an attribute on the button.
        btn.innerHTML = 'option'  + val;
        btn.addEventListener('click', checkAnswer);
        document.body.appendChild(btn);
    })(arr[i]);  // create a closure, so that all buttons don't refer to the same value later.
}

function checkAnswer(evt) {
    if (evt.target.data == 4) {  // evt.target == button
        alert('Good answer');
    } else {
        alert('Bad answer');
    }
}