title: Javascript: How to change class and CSS when value is zero
body: <p>I have 9 boxes in my html.</p>
  <p>There is a value, id called 'lifepoint'.</p>
  <p>There is a mouse-click function: click once &amp; decrease one life point. This code is completed.</p>
  <pre><code>function decrementlife() {
          var element = document.getElementById('lifepoint');
          var value = element.innerHTML;
      
          --value;
          console.log(value);
          document.getElementById('lifepoint').innerHTML = value;
          if(value &lt;= 0) { alert(&quot;Game Over!&quot;)};
      }
  </code></pre>
  <p>Also, there is a css style, called 'crackbox'.</p>
  <pre><code>.crackbox {
      position: relative;
      background: linear-gradient(0deg, black, rgb(120, 120, 120));
      width: 12vh;
      height: 12vh;
      border-radius: 30%;
      margin: 5px;
  }
  </code></pre>
  <p>I want to change all box class from 'box' to 'crackbox' if life point is zero. Therefore, all box style can be 'crackbox'.</p>
  <p>The below code is fail...</p>
  <pre><code>$(document).ready(function () {
        $(&quot;.box&quot;).each(function() {
          document.getElementById('lifepoint').innerHTML = value;
          if(value &lt;= 0) { 
            &quot;.box&quot;.toggleClass('crackbox')
          };
  
        })
      });
  
  </code></pre>