JavaScript: Getting index of array withing a for loop

Question

I'm a frustrated newbie who is trying to get some projects done, but I always get stuck... at the same principle (I believe). Can somebody help me, please? ;)

PROJECT 1:

When an image is clicked, I want to change its src attribute. When I'm looping through the array of images, I don't know how to get the index of the image that has just been clicked on, I'd always end up with the index of the last image - I guess that's because the loop would go through the whole array, that's why I added break; which should get me out of the loop. It doesn't work (obviously).

for (var i = 0; i < images.length; i++) {
    images[i].onclick = function() {
        images[i].src = "noun_2.png";
    };
    break;
    }

PROJECT 2:

When the button is clicked, I want the images with class="new" to fade out. I don't understand why the code is not working.

<img class="new" src="media/1.jpg">
<img src="media/france.jpg">
<img class="new" src="media/2.jpg">
<img src="media/france2.jpg">
<img class="new" src="media/3.jpg">

<p id="button">Click me!</p>

<script>
    var button = document.getElementById("button");
    var images = document.getElementsByClassName("new");

    button.onclick = function() {
        for (var i = 0; i < images.length; i++) {
            images[i].setAttribute("class", "fadeOutClass");
        }
};
</script>

*EDIT: IIFE solves the project 1, I'm adding the whole source code of the project 2:

<!DOCTYPE html>
<html>
<head>
    <title>Fade Out</title>
    <meta charset="utf-8">
    <style>
        #button {
            padding: 15px;
            background-color: grey;
            margin: 0 35%;
            }

        img {
            opacity: 1;
            transition-duration: 3s;
            }

        .fadeOutClass {
            opacity: 0;
            }
    </style>

</head>
<body>

<img class="new" src="media/1.jpg">
<img src="media/france.jpg">
<img class="new" src="media/2.jpg">
<img src="media/france2.jpg">
<img class="new" src="media/3.jpg">

<p id="button">Click me!</p>

<script>
    var button = document.getElementById("button");
        images = document.getElementsByClassName("new");


    button.onclick = function() {
        for (const i = 0; i < images.length; i++) {
            images[i].setAttribute("class", "fadeOutClass");
        }
    };

</script>
</body>
</html>

I want all the images with class=new to fade out at the same time, but when I click the button, only the first image fades out. When I click the button again, the next image fades out and so on.

Possible duplicate of [JavaScript closure inside loops – simple practical example](https://stackoverflow.com/questions/750486/javascript-closure-inside-loops-simple-practical-example) — Teemu, Feb 23 '18 at 15:29
Problem 1 comes from a scope problem. The keyword `var` used in for loop is misleading, the var is not limited to the for loop, its declaration is actually moved upper (at beginning of the function if inside one, global if not). Then, when your click functions are called, the `i` var is still visible, but it has now the last value from the loop. Using closures as in the dupe will fix. We have not enough info for problem 2 i guess, any error message? — Kaddath, Feb 23 '18 at 15:34
Problem 1, your loop is only executing once as you break it. Is this intended? — SSD, Feb 23 '18 at 15:35

score 0 · Answer 1 · answered Feb 23 '18 at 15:33

0

Try this:
var myArray = [123, 15, 187, 32];

myArray.forEach(function (value, i) {
    console.log('%d: %s', i, value);
});

answered Feb 23 '18 at 15:33

Bimlendu Kumar

226
2
17

sudavid4 · Accepted Answer · 2018-02-23T16:54:35.217

PROJECT1: you may solve this in one of two ways.

1.Don't use the var keyword, use let or const instead (please search the net to fully understand the differences)

for (let i = 0; i < images.length; i++) {
    images[i].onclick = function() {
        images[i].src = "noun_2.png";
    };
}

This is the more advisable way to write code nowadays. It won't work on older browser though (e.g:ie doesn't support it) so if you need to support older browsers you'd need to "compile" you code.

2.wrap your onclick in an iife(immediately invoked function expresion)

for (var i = 0; i < images.length; i++) {
    (function(index){
        images[index].onclick = function() {
            images[index].src = "noun_2.png";
        };
    })(i)
}

again I'll refrain from fully explaining here how and why this works, please do yourself a favor and search the net what an iife is, why and when to use it

PROJECT2: you likely have some trouble with your css. Are you sure this css class 'fadeOutClass' exists and is properly implemented and imported? Do you know how to debug in the browser? do you know how to inspect your html? If you do you'll be able to see that the "class" property of your images are properly getting updated, so no problem there. If you don't then please search the net and learn how to do this.

const in a for loop? Seems to throw a TypeError. let would be accurate. See: https://stackoverflow.com/questions/31987465/ecmascript-2015-const-in-for-loops — foxinatardis, Feb 23 '18 at 16:01

JavaScript: Getting index of array withing a for loop

2 Answers2