javascript - onclick 发生 onload？

Question

所以我是一个 JavaScript 新手。我真的不知道我在做什么。我正在尝试将 onclick 函数应用于文档中的所有图像标签，而无需在线指定任何内容。我试图获取带有“img”标签的每个元素的数组，然后为每个元素指定要调用的函数 onclick，但由于某种原因，一旦页面加载然后不工作，就会为每个图像调用一次 showImage单击。我在文档的最后调用一次函数 clickImages()，而 showImage() 从不在以下代码之外。

提前致谢!如果需要其他信息，请告诉我。

function clickImages()
{
var images = document.getElementsByTagName("img");
for(var i = 0; i < images.length; i++)
{
   images[i].onclick=showImage(600, 800, images[i].src);
}
}

function showImage(width,height,file)
{ 
document.getElementById("trailimageid").height = height;
document.getElementById("trailimageid").width = width;
document.getElementById("ttimg").src = file; 
}

糟糕!忘了说了。我有这个:

document.write('<div id="trailimageid" style="position:absolute;left:0px;top:0px;width:1px;height:1px;border:1px solid #888888;background:#000000;"><img id="ttimg" src="temp" /></div>');

基本上我正在做的是在新的 div 中打开页面顶部的图像 onclick。现在这可能是一种愚蠢的做法，但我会让带有图像的新 div 跳转到鼠标的位置，稍后再跟随它。

Answer 1

我假设当您单击一个图像时，您不希望所有图像都做某事。就是你点击的那个。如果是这种情况，您不需要遍历所有 img。通过选择所有带有图像标签的元素，您已经创建了一个 0 索引的对象列表。

var images = document.getElementsByTagName('img');
images[i].onclick = function() {
    showImage(600, 800, images[i].src);
};

编辑:很抱歉那是愚蠢的。 i 是未定义的，因为……它还没有被定义。你必须用一个整数来代替 i。实现此目的的方法之一是将其包装在函数中并将 i 作为参数传递。

var someFunc(i) { // above snippet ... };

或者，正如您所做的那样，遍历图像列表的长度并将 i 替换为每个图像。

for(var i = 0; i < images.length; i++;) {
    // first snippet (define images outside the loop) ...
};

所以如果你有 3 张图片，这将存在于你的运行时中:

images[0].onclick = function() { code };
images[1].onclick = function() { code };
images[2].onclick = function() { code };

值得一提的是，如果您将 for 循环包装在一个函数中，则在执行该函数之前，您的 for 循环将不会运行。 clickImage 函数似乎没有从提供的内容中调用。您可以删除 clickImage 函数，代码应该会按预期工作。