title: Can't keep executing an if statement
body: <p>I am making a Javascript game, where I want the button <code>sleep</code> disappear if the fish number is lower than 4. I have already set up an if statement, but it seems to only work once after the number is lower than 4. Is there any way to keep this if statement executing over and over?</p>
  <p>(You can increase the number by clicking the button <code>catchFish</code>. You can decrease the number by clicking <code>sleep</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>let fishNum = document.getElementById("fishNum");
  let sleep = document.getElementById("Btn2");
  
  function addFish() {
    fishNum.innerHTML++;
  
    if (fishNum.innerHTML &gt; 4) {
      sleep.disabled = false;
    }
  }
  
  document.getElementById("Btn1").addEventListener("click", addFish);
  
  function loseFish() {
    fishNum.innerHTML--;
    if (fishNum.innerHTML &lt;= 4) {
      sleep.style.opacity = "0";
      sleep.style.pointerEvents = "none";
  
    }
  }
  
  document.getElementById("Btn2").addEventListener("click", loseFish);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;span id=fishNum&gt;0&lt;/span&gt;
  &lt;button id="Btn1"&gt;catchFish&lt;/button&gt;
  &lt;button id="Btn2" disabled="true"&gt;sleep&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>