我是否在JavaScript代码中遗漏了一些我可能忽略的东西？

我正在创建一个简单的应用程序，当你点击模糊图像时，会出现未模糊的图像，但由于某种原因，它似乎无法工作。我在这个应用程序中使用了Bootstrap，让它对手机友好，尽管我不相信它会导致我的JS代码崩溃

这是我的标记：

<div class="container">
      <div class="row row-padding center-block">
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="zero" src="zeroblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="one" src="oneblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="two" src="twoblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="three" src="threeblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="four" src="fourblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
        <div class="col-lg-4 col-md-6 col-sm-6">
          <img id="five" src="fiveblur.jpg">
        </div><!-- end col-lg-4 col-sm-6 -->
      </div><!-- end row -->
    </div><!-- end container-fluid -->

（我只包含了与我的JS代码相关的标记）

这是我的JS代码：

function init() {
    var images = document.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++);
        images[i].onclick = showAnswer;
};

function showAnswer(eventObj) {
    var image = eventObj.target;

    var name = image.id;
    name = name + ".jpg";
    image.src = name;
}

函数init（）{
var images=document.getElementsByTagName（“img”）；
对于（var i=0；i

---

window.onload=init

您不能像这样向图像中添加事件侦听器：

images[i].onclick = showAnswer;

使用：

这：

for（var i=0；i

应该是这样的：

for (var i = 0; i < images.length; i++){
    images[i].onclick = showAnswer;
}

for（var i=0；i

您的

init

函数在

for

行的末尾有一个额外的分号

最佳实践是始终使用括号，这样可以避免此类问题

因此，用这个函数替换

init

函数，它应该可以正常工作：

function init() {
    var images = document.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++) {
        images[i].onclick = showAnswer;
    }
};

函数init（）{
var images=document.getElementsByTagName（“img”）；
对于（var i=0；i

答案是，您的循环除了更改i的值外，什么也不做

var i = 0;
for (; i < images.length; i += 1) ; // semicolon means end-of-statement (ie: do nothing)

然而，这就是为什么我告诉我的团队成员，他们应该总是在

if

，

while

，

for

等周围使用大括号

var i = 0;
for (; i < images.length; i += 1) {
  images[i].onclick = showAnswer;
}

forEach的功能并不强大，但至少比担心有趣的循环行为要好

当然，如果

images

是某种类型的节点列表（例如：来自

document.get___;（）；

或

document.querySelectorAll（）

），那么您必须更进一步：

[].slice.call(images).forEach( img => img.onclick = showAnswer );

最好分为两个步骤：

function toArray (arrLike, start, end) {
  return [].slice.call(arrLike, start, end);
}

toArray(images).forEach( img => img.onclick = showAnswer );

---

你可以这样添加一个事件侦听器。这不好，但你可以这样做，而且它会起作用（有些古怪的行为是不会发生的）。要这样添加，据我所知，你还需要添加括号，因为字段看起来像这样据我所知，这不会触发。但是，您不能在代码中添加括号，因为原因很明显，因此，您可以将其全部作为字符串文本或包装在匿名函数中，但很明显，就我所知，它不应该工作。@Dellirium这没有任何意义。@Dellirium当您连接事件时处理程序内联在HTML中，您必须使用括号，因为您编写的代码应该在事件发生时由另一个函数执行。当您在JavaScript中连接到事件处理属性时，您不使用括号，因为这样会立即调用函数，您只需引用函数即可。E不推荐使用这种方法。请使用

addEventListener（）

的DOM标准。使用这种方法，您也不需要使用括号，因为您只想引用函数。@Juhana当然可以，编写

showAnswer

和

showAnswer（）

是两个完全不同的东西，或者至少应该是，我不确定在这种特殊情况下它们是否是，但它们应该是不同的。您可以使用

onload=“init（）”

在body标记中也有。@whd但你不应该。你真的不应该使用内联HTML事件处理程序，因为它们创建意大利面代码，不遵循DOM事件模型标准，为要在中执行的属性的指定值创建全局函数包装，这会将该code.Gee中的biding更改为

this

。听起来像我5分钟前的答案。StackOverflow更新速度很慢，在刷新页面之前没有看到：是的！非常感谢！@Chaaaley别忘了标记为答案！祝你好运！

var i = 0;
for (; i < images.length; i += 1) {
  images[i].onclick = showAnswer;
}

images.forEach( img => img.onclick = showAnswer );

[].slice.call(images).forEach( img => img.onclick = showAnswer );

function toArray (arrLike, start, end) {
  return [].slice.call(arrLike, start, end);
}

toArray(images).forEach( img => img.onclick = showAnswer );