CODEWITHSUNDEEP
javascript
difoxy2
difoxy2

Reputation: 59

will for/in loop exit a function after the loop?

function toggle() {
    overlays = document.getElementsByClassName("overlay");

    if (globalOpacityValue == 0.9){
        globalOpacityValue = 0;
    }else{
        globalOpacityValue = 0.9;
    }
    console.log("globalOpacityValue: " + globalOpacityValue);

    for (overlay in overlays) {
        overlays[overlay].style.opacity = globalOpacityValue;
    }
    console.log("toggle routine done!");

    tempStoreOnChangeArtificial();
    console.log("tempStoreOnChangeArtificial done!");
}

It seems to me that after the for/in loop, my function ends.

My toggle() never display "toggle routine done!", and obviously it doesn't run the tempStoreOnChangeArtificial();

But it does things in the for/in loop.

why?

Upvotes: 0

Views: 39

Answers (3)

Nina Scholz
Nina Scholz

Reputation: 386654

document.getElementsByClassName returns an array like object, which is not iterable with a for ... in statement.

function toggle() {
    var overlays = document.getElementsByClassName("overlay"),
        i;

    if (globalOpacityValue == 0.9){
        globalOpacityValue = 0;
    }else{
        globalOpacityValue = 0.9;
    }
    console.log("globalOpacityValue: " + globalOpacityValue);

    for (i = 0; i< overlays.length; i++) {
        overlays[i].style.opacity = globalOpacityValue;
    }
    console.log("toggle routine done!");

//    tempStoreOnChangeArtificial();
    console.log("tempStoreOnChangeArtificial done!");
}

var globalOpacityValue = 0;
toggle();
<div class="overlay">a</div>
<div class="overlay">b</div>
<div class="overlay">c</div>

Upvotes: 2

Ele
Ele

Reputation: 33726

  • You're trying to get an element from HTMLCollection using in.
  • Use overlay of overlays.
function toggle() {
    overlays = document.getElementsByClassName("overlay");

    if (globalOpacityValue == 0.9){
        globalOpacityValue = 0;
    }else{
        globalOpacityValue = 0.9;
    }
    console.log("globalOpacityValue: " + globalOpacityValue);

    for (overlay of overlays) {
        overlay.style.opacity = globalOpacityValue;
    }
    console.log("toggle routine done!");

    tempStoreOnChangeArtificial();
    console.log("tempStoreOnChangeArtificial done!");
}

Resources

Upvotes: 1

Varinder
Varinder

Reputation: 2664

I'm not aware that you can iterate over document.getElementByClassName using for in perhaps that's where the problem is, you may want to iterate over HTMLCollection like below:

function toggle() {
    overlays = document.getElementsByClassName("overlay");

    if (globalOpacityValue == 0.9){
        globalOpacityValue = 0;
    }else{
        globalOpacityValue = 0.9;
    }
    console.log("globalOpacityValue: " + globalOpacityValue);

    Array.prototype.forEach.call(overlays, function(overlay) {
        overlay.style.opacity = globalOpacityValue;
    });

    console.log("toggle routine done!");

    tempStoreOnChangeArtificial();
    console.log("tempStoreOnChangeArtificial done!");
}

Upvotes: 1

Related Questions