javascript onclick function null

javascript onclick function null

本文关键字：null function onclick javascript      更新时间：2023-09-26

我有以下js函数:

function Modification_Article()
{
     var photo = document.getElementById("photo_javascript");
     photo.innerHTML = "";
     document.getElementById("photo_delete_javascript").innerHTML = "";
     var loop = 0;
     for(loop = 0; loop < arguments.length; loop++)
     {
        if(loop < 3)
        {
            document.getElementById('Modification_Article_Id').value = arguments[loop];
            document.getElementById("Modification_Article_Titre").value = decodeURIComponent(arguments[loop + 1]);
            document.getElementById("Modification_Article_Text").value = decodeURIComponent(arguments[loop + 2]);
            loop += 2;
        }
        else
        {
            var image_to_delete = document.createElement('img');
            var path = arguments[loop + 1];
            var begin = path.substr(0, 32);
            var end = path.substr(32);
            var id = arguments[loop];
            console.log(id);
            image_to_delete.id = "image_" + id;
            image_to_delete.src = "images/Articles/" + begin + "_100x100" + end;
            image_to_delete.onclick = function(){ console.log(id); };
            photo.appendChild(image_to_delete);  
            loop += 1;
            image_to_delete = null;
        }
    }
}

事实是，当我第一次打印"id"时，它显示"10"answers"11"(根据照片的id)，但第二次在onclick函数中，只有"null"显示。我真的不明白为什么…

在onclick函数中使用id有一个问题:在创建的每个IMG元素中，您都引用相同的变量。

我认为你期望，当id在onclick函数中被引用时，它以某种方式被函数复制和记住。但事实并非如此，它引用了相同的变量，并且该变量的值与上次迭代时相同。

要解决这个问题，你可以使用这样的命令:

(function(id){
    image_to_delete.onclick = function(){ console.log(id); };
})(id);

在上面的代码中，通过将id变量作为包装函数参数传递，生成了一个副本。

相关文章：