SetInterval "loop" to change array item and reverting previous item change function not working? (noob) Javascript

Question

I'm very new to js and am trying to loop 5 text elements from 40% opacity to 100% one at a time within a time interval. If there's a better way to code this, PLEASE let me know because I've been trying to vary this function for 5 hours... Also any js tips are appreciated. Thx!

var i = 0;  // start point
var j = -1;
var images = [];    // item Array define
var time = 2000;    // time between switch
     
// item array actual

images[0] = document.getElementById("suppDirText");
images[1] = document.getElementById("videoMeetText");
images[2] = document.getElementById("factInspText");
images[3] = document.getElementById("orderSupText");
images[4] = document.getElementById("payProtText");



function changeImg(){
    images[i].style.opacity = "1";
}
function changeImgBack(){
    images[j].style.opacity = "0.4";
}

// change func
function iconFlow(){
    if (j = -1){
        changeImg();
        i++;
        j++;
    } else if (j < images.length - 2){
        changeImg();
        changeImgBack();
        i++;
        j++;
    } else if (j < images.length - 1){
        changeImg();
        changeImgBack();
        j++;
    } else
        i = 0;
        changeImg();
        changeImgBack();
        j = -1;
    
    // run function every x seconds
    setInterval("iconFlow()", time);
    console.log(i, j);
}

// run function when page loads
window.onload=iconFlow;

`setInterval` lets code run on an interval (repeatedly). You are calling this function from _within_ the function that it is calling, so the amount of times the function is called within this time frame grows exponentially. That is probably not what you want. — Ivar, Aug 16 '20 at 10:25

trincot · Answer 1 · 2020-08-16T12:25:35.197

Some issues in your original question:

An Assignment (=) is not the same as a comparison (==). So if (j = -1) is not making a comparison, but is assigning -1 to j, and since -1 is truthy, that if block is always executed.
You have braces missing in the final else block, meaning that some of those statements that follow it, are not part that else block.
Calling setInterval inside the function that will be called cannot be right. With setTimeout this would be fine, but now you multiply the number of interval-timers that will be active at the same time.

Some other remarks:

Don't ever pass a string to setInterval or setTimeout. If you found a guide that proposed this, throw that guide away (if it was a teacher, maybe don't literally throw them away, but choose a different one). It is outdated by several decades. Just pass the function object.
Make use of function parameters.
Assigning -1 to j only complicates things. Assign a valid index instead.
And last but not least: use modular arithmetic to cycle through the valid range of indexes.

var images = [];
var time = 500;
     
images[0] = document.getElementById("suppDirText");
images[1] = document.getElementById("videoMeetText");
images[2] = document.getElementById("factInspText");
images[3] = document.getElementById("orderSupText");
images[4] = document.getElementById("payProtText");

var i = 0;
var j = images.length - 1; // simpler to assign a valid index

function changeImg(i){ // use parameters
    images[i].style.opacity = "1";
}
function changeImgBack(j){
    images[j].style.opacity = "0.4";
}

function iconFlow(){
    changeImgBack(j)
    changeImg(i);
    j = i; // simpler
    i = (i + 1) % images.length; // use modular arithmetic
}

// call this outside of the function:
setInterval(iconFlow, time);
window.onload=iconFlow;

div { opacity: 0.4 }

<div id="suppDirText">A</div>
<div id="videoMeetText">B</div>
<div id="factInspText">C</div>
<div id="orderSupText">D</div>
<div id="payProtText">E</div>

SetInterval "loop" to change array item and reverting previous item change function not working? (noob) Javascript

1 Answers1