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

Question

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?

Probably you're getting errors. Please share a Minimal, Complete, and Verifiable example — Ele
– Ele, Commented Feb 14, 2018 at 21:28
Your for loop is likely not running properly. In overlays[overlay].style.opacity = globalOpacityValue;, there is a chance that overlays[overlay] is undefined. Then you are trying to access the style property of undefined, which will throw an error. — Patrick Michaelsen
– Patrick Michaelsen, Commented Feb 14, 2018 at 21:30
So normally for/in loop doesn't ends a function? If that's the case I should run through my other codes. — difoxy2
– difoxy2, Commented Feb 14, 2018 at 21:30
Patrick Michaelsen: no. The things in the for/in loop is being done. But yeah, the console always said it can't access to style of undefined. But it still change the style normally so I didn't care — difoxy2
– difoxy2, Commented Feb 14, 2018 at 21:31

Nina Scholz · Accepted Answer · 2018-02-14 21:39:21Z

2

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>

edited Feb 14, 2018 at 21:39

answered Feb 14, 2018 at 21:32

Nina Scholz

388k26 gold badges367 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Varinder · Accepted Answer · 2018-02-14 21:30:57Z

1

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!");
}

answered Feb 14, 2018 at 21:30

Varinder

2,6641 gold badge18 silver badges20 bronze badges

Comments

Ele · Accepted Answer · 2018-02-14 21:34:42Z

1

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

edited Feb 14, 2018 at 21:34

answered Feb 14, 2018 at 21:29

Ele

33.8k7 gold badges43 silver badges80 bronze badges

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Resources

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Resources

Comments

Your Answer

Sign up or log in

Post as a guest

Related