Question

所以我是一个javascript新手。我真的不知道我在做什么。我正在尝试将onclick函数应用于我的文档中的所有图像标记，而无需在线指定任何内容。我尝试使用“img”标记获取每个元素的数组，然后为每个元素指定要调用的函数，但由于某种原因，只要页面加载然后不工作，就会为每个图像调用一次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。这可能是现在这样做的一种愚蠢的方式，但是我将使用新的div将图像跳转到鼠标的位置并稍后跟随它。

Answer 1

我认为当您点击图片时，您不希望所有图片都做某事。只是你点击的那个。如果是这样的话，你不需要遍历所有的imgs。通过选择带有图像标记的所有元素，您已经创建了一个0索引的对象列表。

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

编辑：我很抱歉这是愚蠢的。 i未定义，因为......它还没有被定义。你必须用整数来i。其中一种方法是将它包装在一个函数中并将i作为参数传递。

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

或者，就像你所拥有的那样，循环遍历图像列表的长度并为每个图像列表提供支持。

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函数，代码应该按预期工作。

Answer 2

尝试添加您的函数调用：

var delegate = function () { showImage(600, 800, this.src) };
images[i].onclick = delegate;

随时用（）调用函数将执行它。通过这种方式，您的函数将在稍后调用。

javascript - onclick发生onload？

2 个答案: