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; 
 
\t if (value == var4) { 
 
     display.innerHTML = "good answer"; 
 
    } 
 
\t 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'); 
    } 
}