title: How do I increment a global variable onmousehover, but have it return to it's normal value onmouseout?
body: <p>Hi i'm new to javascript and is trying to create the following functionality.</p>
  <p>I have 7 buttons. Some of these are hovered from the beginning. This depends on a numeric value fetched from the database. So when this value from the database is 4 then 4 buttons will be hovered</p>
  <p>However, when hovering the &quot;Remembered&quot; or &quot;Didn't remember&quot; buttons, as seen in the picture below. The number of buttons that are hovered should change temporarily.</p>
  <p>When &quot;Remembered&quot; is hovered - button 5 should also be hovered.
  When &quot;Remembered&quot; is not hovered - only 4 buttons should be hovered again.</p>
  <p>When &quot;DidNotRemember is hovered&quot; - only button 1 should be hovered.
  When &quot;DidNotRemember&quot; is not hovered - only 4 buttons should be hovered again.</p>
  <p><a href="https://i.stack.imgur.com/VXqMH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VXqMH.png" alt="enter image description here" /></a></p>
  <p>Below is my approach, and I don't quite understand why it doesn't work.</p>
  <p>My code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var actualLeitnerbox = 4; // Dummy value. Will normally be fetched from database
  var leitnerbox = actualLeitnerbox;
  
  function rememberedHovered(leitnerbox) {
    leitnerbox += 1;
    return leitnerbox
  }
  
  function rememberedNotHovered(leitnerbox, actualLeitnerbox) {
    leitnerbox = actualLeitnerbox;
    return leitnerbox
  }
  
  function didNotRememberHovered(leitnerbox) {
    leitnerbox = 1;
    return leitnerbox
  }
  
  function didNotRememberNotHovered(leitnerbox, actualLeitnerbox) {
    leitnerbox = actualLeitnerbox;
    return leitnerbox
  }
  
  var header = document.getElementById("myDIV");
  var btns = header.getElementsByClassName("btn");
  for (var i = 0; i &lt; leitnerbox; i++) {
    btns[i].classList.add("active");
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>/* Style the buttons */
  
  .btn {
    border: none;
    outline: none;
    padding: 10px 16px;
    background-color: #f1f1f1;
    cursor: pointer;
    font-size: 18px;
  }
  
  
  /* Style the active class, and buttons on mouse-over */
  
  .active,
  .btn:hover {
    background-color: #666;
    color: white;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onmouseover="rememberedHovered()" onmouseout="rememberedNotHovered()" class="btn "&gt; Remembered &lt;/button&gt;
  
  &lt;button onmouseover="didNotRememberHovered()" onmouseout="didNotRememberNotHovered()" class="btn "&gt; Did Not Remember &lt;/button&gt;
  
  &lt;div id="myDIV"&gt;
    &lt;button class="btn"&gt;1&lt;/button&gt;
    &lt;button class="btn"&gt;2&lt;/button&gt;
    &lt;button class="btn"&gt;3&lt;/button&gt;
    &lt;button class="btn"&gt;4&lt;/button&gt;
    &lt;button class="btn"&gt;5&lt;/button&gt;
    &lt;button class="btn"&gt;6&lt;/button&gt;
    &lt;button class="btn"&gt;7&lt;/button&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks for reading this</p>