title: If statement returning undefined but still passing the correct returned value on? Javascript
body: <p>This script works... But it doesn't make sense.</p>
  <p><strong>Context</strong> I'm very new to js... This script changes element opacity one by one, when trying to implement a hover &quot;override&quot; 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.</p>
  <p><strong>Problem</strong> My issue is at the if statement converting the ids to index #s in the &quot;idConvertNum&quot; 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 &quot;i&quot; receiving the converted index receives the correct value?? ... I, am so confused.</p>
  <p>Thanks so much, if you have any tips they're greatly appreciated!</p>
  <p>html</p>
  <pre><code>&lt;!--main content start--&gt;
  &lt;div id=&quot;main-container&quot;&gt;
  &lt;div id=&quot;iconGrid&quot;&gt;
      &lt;div id=&quot;arrowText1&quot; class=&quot;arrow&quot;&gt;→&lt;/div&gt;
      &lt;div id=&quot;arrowText2&quot; class=&quot;arrow&quot;&gt;→&lt;/div&gt;
      &lt;div id=&quot;arrowText3&quot; class=&quot;arrow&quot;&gt;→&lt;/div&gt;
      &lt;div id=&quot;arrowText4&quot; class=&quot;arrow&quot;&gt;→&lt;/div&gt;
      &lt;i id=&quot;suppDirIcon&quot;&gt;&lt;img onmouseover=&quot;onHover(id)&quot; onmouseleave=&quot;offHover(id)&quot; id=&quot;icon1&quot; class=&quot;iconFlow&quot; src=&quot;/assets/supplier directory icon.png&quot; alt=&quot;supplier directory&quot;&gt;&lt;/i&gt;
      &lt;i id=&quot;videoMeetIcon&quot;&gt;&lt;img onmouseover=&quot;onHover(id)&quot; onmouseleave=&quot;offHover(id)&quot; id=&quot;icon2&quot; class=&quot;iconFlow&quot; src=&quot;/assets/video meeting icon.png&quot; alt=&quot;video meetings&quot;&gt;&lt;/i&gt;
      &lt;i id=&quot;factInspIcon&quot;&gt;&lt;img onmouseover=&quot;onHover(id)&quot; onmouseleave=&quot;offHover(id)&quot; id=&quot;icon3&quot; class=&quot;iconFlow&quot; src=&quot;/assets/inspection icon.png&quot; alt=&quot;factory inspections&quot;&gt;&lt;/i&gt;
      &lt;i id=&quot;orderSupIcon&quot;&gt;&lt;img onmouseover=&quot;onHover(id)&quot; onmouseleave=&quot;offHover(id)&quot; id=&quot;icon4&quot; class=&quot;iconFlow&quot; src=&quot;/assets/supervision icon.png&quot; alt=&quot;order supervision&quot;&gt;&lt;/i&gt;
      &lt;i id=&quot;payProtIcon&quot;&gt;&lt;img onmouseover=&quot;onHover(id)&quot; onmouseleave=&quot;offHover(id)&quot; id=&quot;icon5&quot; class=&quot;iconFlow&quot; src=&quot;/assets/pay icon.png&quot; alt=&quot;payment protection&quot;&gt;&lt;/i&gt;
      &lt;div id=&quot;suppDirText&quot; class=&quot;iconFlowText&quot;&gt;Supplier directory&lt;/div&gt;
      &lt;div id=&quot;videoMeetText&quot; class=&quot;iconFlowText&quot;&gt;Video meetings&lt;/div&gt;
      &lt;div id=&quot;factInspText&quot; class=&quot;iconFlowText&quot;&gt;Factory inspections&lt;/div&gt;
      &lt;div id=&quot;orderSupText&quot; class=&quot;iconFlowText&quot;&gt;Order supervision&lt;/div&gt;
      &lt;div id=&quot;payProtText&quot; class=&quot;iconFlowText&quot;&gt;Payment Protection&lt;/div&gt;
  &lt;/div&gt;
  &lt;hr class=&quot;dividerLine&quot;&gt;
  </code></pre>
  <p>Javascript</p>
  <pre><code>var iconText = [];
  var iconImg = [];
  var time = 5000;
  
  // icon subtext
  iconText[0] = document.getElementById(&quot;suppDirText&quot;);
  iconText[1] = document.getElementById(&quot;videoMeetText&quot;);
  iconText[2] = document.getElementById(&quot;factInspText&quot;);
  iconText[3] = document.getElementById(&quot;orderSupText&quot;);
  iconText[4] = document.getElementById(&quot;payProtText&quot;);
  // icons
  iconImg[0] = document.getElementById(&quot;icon1&quot;);
  iconImg[1] = document.getElementById(&quot;icon2&quot;);
  iconImg[2] = document.getElementById(&quot;icon3&quot;);
  iconImg[3] = document.getElementById(&quot;icon4&quot;);
  iconImg[4] = document.getElementById(&quot;icon5&quot;);
  // starting indexes
  var i = 0;
  var j = iconImg.length - 1;
  // converts id of hovered element to associated index
  function idConvertNum(id){
      if (id == &quot;icon1&quot;){ return 0;}
      else if (id == &quot;icon2&quot;){ return 1;}
      else if (id == &quot;icon3&quot;){ return 2;}
      else if (id == &quot;icon4&quot;){ 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 &quot;onmouseenter&quot;
      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 &quot;onmouseleave&quot;
      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 = &quot;1&quot;;
      iconImg[i].style.opacity = &quot;1&quot;;
      iconImg[i].style.width=&quot;90px&quot;;
  }
  function changeIconBack(j){ // if making changes, remember to match .css file styles
      iconText[j].style.opacity = &quot;0.4&quot;;
      iconImg[j].style.opacity = &quot;0.4&quot;;
      iconImg[j].style.width=&quot;70px&quot;;
  }
  
  function iconFlow(){
      changeIconBack(j)
      changeIcon(i);
      j = i;
      i = (i + 1) % iconImg.length; // used modular arithmetic
  }
  
  var iconTimer = setInterval(iconFlow, time);
  window.onload=iconFlow;
  </code></pre>