Как указать идентификатор кнопки изображения, динамически созданной с использованием JavaScript?

Question

Я новичок в JavaScript, и у меня есть JavaScript, который создает 8 кнопок изображения на HTML-странице. Я хочу вставить функцию в каждую созданную кнопку изображения, которая может вернуть определенный идентификатор, но проблема в том, что когда я нажимаю любую кнопку, я получаю только id: 8. Но я хочу id: 1 для первой кнопки и так далее. данных = {идентификатор: 1, ID: 2 ..... ID: 8} и некоторые изображения

for(var i=0;i<8;i++){ 
    var x=data[i].image; //this is the image I gets from a JSON string 
    var y=data[i].name;  //this is the name I gets from a JSON string 
    var id=data[i].id;  //this is the id I gets from a JSON string 
    var body = document.getElementsByTagName("body")[0]; 
    var myButton = document.createElement("input"); 
    myButton.src=x; 
    myButton.name=String(id); 
    myButton.id=data[i].id; 
    myButton.type = "image"; 
    body.appendChild(myButton); 

    //i need help with below section 
    myButton.onclick = function(){ 
     console.log("this is my id ",myButton.id); 
     //this function will return only the`data[8].id every time 
    }; 
    console.log(x); 
    console.log(y); 
    console.log(id); 
} 

Answer 1

Это действительно легко исправить.

В вашей функции onclick не ссылайтесь на кнопку по ее имени переменной. Заменить имя переменной «MyButton» с «это»:

myButton.onclick = function(){ 
    console.log("this is my id ",this.id); 
    //this function will return only the`data[8].id every time 
}; 

EDIT: Я увидел, что я не был первым, чтобы решить вашу проблему. @RobG сделал это в комментариях передо мной. Технически я не должен был за это отвечать.