If statement returning undefined but still passing the correct returned value on? Javascript

Question

This script works... But it doesn't make sense.

Context I'm very new to js... This script changes element opacity one by one, when trying to implement a hover "override" I had to find a way to convert the hovered elements id to the index used by the script that rotates through. That way the flow resets/resumes from the hovered element.

Problem My issue is at the if statement converting the ids to index #s in the "idConvertNum" func. The if statement values all return undefined even though the ids are the same as the string values?. Only the else(4) passes through? The weird part is that the "i" receiving the converted index receives the correct value?. .., I. am so confused.

Thanks so much, if you have any tips they're greatly appreciated!

html

<!--main content start-->
<div id="main-container">
<div id="iconGrid">
    <div id="arrowText1" class="arrow">→</div>
    <div id="arrowText2" class="arrow">→</div>
    <div id="arrowText3" class="arrow">→</div>
    <div id="arrowText4" class="arrow">→</div>
    <i id="suppDirIcon"><img onmouseover="onHover(id)" onmouseleave="offHover(id)" id="icon1" class="iconFlow" src="/assets/supplier directory icon.png" alt="supplier directory"></i>
    <i id="videoMeetIcon"><img onmouseover="onHover(id)" onmouseleave="offHover(id)" id="icon2" class="iconFlow" src="/assets/video meeting icon.png" alt="video meetings"></i>
    <i id="factInspIcon"><img onmouseover="onHover(id)" onmouseleave="offHover(id)" id="icon3" class="iconFlow" src="/assets/inspection icon.png" alt="factory inspections"></i>
    <i id="orderSupIcon"><img onmouseover="onHover(id)" onmouseleave="offHover(id)" id="icon4" class="iconFlow" src="/assets/supervision icon.png" alt="order supervision"></i>
    <i id="payProtIcon"><img onmouseover="onHover(id)" onmouseleave="offHover(id)" id="icon5" class="iconFlow" src="/assets/pay icon.png" alt="payment protection"></i>
    <div id="suppDirText" class="iconFlowText">Supplier directory</div>
    <div id="videoMeetText" class="iconFlowText">Video meetings</div>
    <div id="factInspText" class="iconFlowText">Factory inspections</div>
    <div id="orderSupText" class="iconFlowText">Order supervision</div>
    <div id="payProtText" class="iconFlowText">Payment Protection</div>
</div>
<hr class="dividerLine">

Javascript

var iconText = [];
var iconImg = [];
var time = 5000;

// icon subtext
iconText[0] = document.getElementById("suppDirText");
iconText[1] = document.getElementById("videoMeetText");
iconText[2] = document.getElementById("factInspText");
iconText[3] = document.getElementById("orderSupText");
iconText[4] = document.getElementById("payProtText");
// icons
iconImg[0] = document.getElementById("icon1");
iconImg[1] = document.getElementById("icon2");
iconImg[2] = document.getElementById("icon3");
iconImg[3] = document.getElementById("icon4");
iconImg[4] = document.getElementById("icon5");
// starting indexes
var i = 0;
var j = iconImg.length - 1;
// converts id of hovered element to associated index
function idConvertNum(id){
    if (id == "icon1"){ return 0;}
    else if (id == "icon2"){ return 1;}
    else if (id == "icon3"){ return 2;}
    else if (id == "icon4"){ return 3;} // all undefined ??? the ids are == to the strings? why?
    else { return 4;} // always returns 4, no matter which element is hovered ???
}
// resets flow to hovered element
function onHover(id){ // passes element id through html "onmouseenter"
    clearInterval(iconTimer); // stops interval
    changeIconBack(j); // resets all to default
    i = idConvertNum(id); // sets i to index value converted from id

                console.log(idConvertNum()) // always returns 4 but script works as intended?

    if (i==0){ // pairs j to new i
        j = iconImg.length - 1;
    } else {
        j = i - 1;
    };
    iconFlow(); // calls update func
}
// continues flow from last hovered element
function offHover(id){ // passes element id through html "onmouseleave"
    i = idConvertNum(id); // sets i to index value converted from id
    if (i==0){ // pairs j to new i
        j = iconImg.length - 1;
    } else {
        j = i - 1;
    };
    iconFlow(); // calls update func
    iconTimer = setInterval(iconFlow, time); // starts interval flow
}

function changeIcon(i){ // if making changes, remember to match .css file styles
    iconText[i].style.opacity = "1";
    iconImg[i].style.opacity = "1";
    iconImg[i].style.width="90px";
}
function changeIconBack(j){ // if making changes, remember to match .css file styles
    iconText[j].style.opacity = "0.4";
    iconImg[j].style.opacity = "0.4";
    iconImg[j].style.width="70px";
}

function iconFlow(){
    changeIconBack(j)
    changeIcon(i);
    j = i;
    i = (i + 1) % iconImg.length; // used modular arithmetic
}

var iconTimer = setInterval(iconFlow, time);
window.onload=iconFlow;

Answer 1

You should log i or idConvertNum(id) instead of the result of calling idConvertNum with no arguments, as that will always return the default value of 4 .

function onHover(id){ // passes element id through html "onmouseenter"
    clearInterval(iconTimer); // stops interval
    changeIconBack(j); // resets all to default
    i = idConvertNum(id); // sets i to index value converted from id

    console.log(i)

    if (i==0){ // pairs j to new i
        j = iconImg.length - 1;
    } else {
        j = i - 1;
    };
    iconFlow(); // calls update func
}