title: how to map or put variables in array?
body: <p>I am not even sure what would be the proper terminology for what I am trying to accomplish here.</p>
  <p>Below is the script I put together which works.</p>
  <p>if a div (content a) is in view, an element (menu 1)'s class is changed.</p>
  <p>if a div (content b) is in view, an element (menu 2)'s class is changed. (repeat 5 more times)</p>
  <pre><code>var elem1 = document.querySelectorAll('.menu1');  
  var elem2 = document.querySelectorAll('.menu2');        
  var contentOne = document.querySelector('#content-one');
  var contentTwo = document.querySelector('#content-two');  
      
  var isInViewport = function (elem) {
  var distance = elem.getBoundingClientRect();
  return (
      distance.top &gt;= 0 &amp;&amp;
      distance.left &gt;= 0 &amp;&amp;
      distance.bottom &lt;= (window.innerHeight || document.documentElement.clientHeight) &amp;&amp;
      distance.right &lt;= (window.innerWidth || document.documentElement.clientWidth)
  );
  };
  
  
  
  window.addEventListener('scroll', function (event) {
  if (isInViewport(contentOne)) {
      
      for (var i = 0; i &lt; elem1.length; i++) {
       elem1[i].className = elem1[i].className.replace(
                  'menu1',
                  'active'
              );
      }
      
      
  } else {
  
      for (var i = 0; i &lt; elem1.length; i++) { 
      elem1[i].className = elem1[i].className.replace(
                  'active',
                  'menu1'
              );
      }
   }
  
  
  if (isInViewport(contentTwo)) {
      console.log('Two In viewport!');
      
      for (var i = 0; i &lt; elem2.length; i++) {
      elem2[i].className = elem2[i].className.replace(
                  'menu2',
                  'active'
              );
      }
      
      
  } else {
  console.log('Two Nope...');
      
      for (var i = 0; i &lt; elem2.length; i++) { 
      elem2[i].className = elem2[i].className.replace(
                  'active',
                  'menu2'
              );
      }    
      
  }
  
  }, false);
    
  </code></pre>
  <p>I can copy &amp; paste this logic five more times &amp; call it a day but I wish to learn how I put all repeating variables &amp; elements together (in a map? array?  I have no idea) so that it isn't so redundant.</p>
  <p>Thanks.</p>
  <p>Oh &amp; I am only using querySelectorAll for the menu items because querySelector just won't work.  Same with &quot;.replace.&quot;  I couldn't make &quot;.toggle&quot; to work; if .toggle would have worked, I think this code could be much more concise.</p>
  <p>Would really love any explanation as to why &quot;.toggle&quot; fails but &quot;.replace&quot; works &amp; why &quot;querySelectorAll&quot; works but &quot;querySelector&quot; fails.</p>