Javascriptボタンとして表示された配列要素をクリックするとイベントを開始する方法

Question

私は与えられた項目を配列に配置してボタンとして表示しています。ユーザーはボタンの1つをクリックします。ボタンをクリックすることによって、彼は答えをクリックすることが異なる場合があります。これは私がこれまでにやったことです：

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