Question

我是JavaScript的新手，我正在使用JavaScript为HTML页面创建8个图像按钮。我想在每个生成的图像按钮中插入一个函数，它可以返回一个特定的id，但问题是当我点击任何按钮时我只得到id：8。但是我想要id：1代表第一个按钮，依此类推。 data = {id：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”替换为“this”：

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

编辑：我看到我不是第一个解决你问题的人。 @RobG在我面前的评论中做到了所以从技术上来说，我不应该对这个答案有所帮助。

如何为使用JavaScript动态创建的图像按钮赋予id？

1 个答案: