title: How do I convert this code so the functions can take a variable?
body: <p>I am trying to change the color of nav bar elements when the mouse goes over them.</p>
  <p>This piece of code does that but for only the first button:</p>
  <pre><code>let navOne = document.getElementById(&quot;nav1&quot;);
  
  function mouseOn() {
      nav1.style.color = &quot;red&quot;;
  }
  
  function mouseOff() {
      nav1.style.color = &quot;black&quot;;
  }
  
  navOne.addEventListener('mouseover', mouseOn);
  navOne.addEventListener('mouseout', mouseOff);
  </code></pre>
  <p>I have been trying to convert the code so the functions work for multiple buttons, but cannot seem to get it to work. Here is the code so far:</p>
  <pre><code>let navOne = document.getElementById(&quot;nav1&quot;);
  
  function mouseOn(navButton) {
      navButton.style.color = &quot;red&quot;;
  }
  
  function mouseOff(navButton) {
      navButton.style.color = &quot;black&quot;;
  }
  
  navOne.addEventListener('mouseover', mouseOn(navOne));
  navOne.addEventListener('mouseout', mouseOff(navOne));
  </code></pre>
  <p>It has no errors, but does not cause any color change when I move my mouse button over the nav1 element.</p>
  <p>Any help is greatly appreciated.</p>