Question

我有以下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;
        }
    }
}

事实是当我打印＆＃34; id＆＃34;它第一次显示＆＃34; 10＆＃34;和＆＃34; 11＆＃34; （根据照片的ID），但是第二次在onclick函数中，只有＆＃34; null＆＃34;是显示。我真的不明白为什么......

Answer 1

在onclick函数中使用id时出现问题：在创建的每个IMG元素中，您都引用了THE SAME变量。

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

要解决此问题，您可以使用以下内容：

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

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

javascript onclick函数null

1 个答案: