我的 JavaScript 代码中是否遗漏了一些我可能会忽略的内容？

Question

I'm creating a simple app that when you click on a blurred image, the un-blurred image will appear, but it does not seem to be working for some reason. I used Bootstrap in this app to allow it to be mobile friendly, although I do not believe that it is causing my JS code to break.

Here is my markup:

<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 -->

(I only included the markup pertaining to my JS code)

and here is my JS code:

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;
}

window.onload = init;

Answer 1

This:

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

Should be this:

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

Answer 2

The answer is that your loop is doing exactly nothing but changing the value of i.

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

So technically your last image should be clickable (because i has been changed to the last number before the length of the array).

If you remove the semicolon, the statement should just work.

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

However, this is why I tell the people on my teams that they should always use braces around if , while , for , etc...

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

We're now dealing with a much more explicit set of behaviours. That's not to say that languages with significant whitespace are bad, but to say that it gets confusing when you start mixing and matching when whitespace matters and when it doesn't, within the same function, let alone the same file.

Additionally, I have them use more functional techniques.

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

forEach isn't hugely functional, but it's better than worrying about funny loop behaviour, at least.

Of course, if images is a NodeList of some kind (eg: comes from document.get____( ); or document.querySelectorAll( ) , then you have to take it one step further:

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

Which is better broken into two steps:

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

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

Answer 3

Your init function has an extra semicolon at the end of the for line.

Best practice is to always use brackets, so you avoid this kind of problems.

So replace your init function with this and it should work just fine:

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

Answer 4

You cannot add an event listener to the images like this:

images[i].onclick = showAnswer;

Use:

images[i].addEventListener('click', showAnswer);