title: How to disable function based on condistion - JS
body: <p>Hope someone can help. I'm new to JS and need some help.</p>
  <p>I have the following code:</p>
  <pre><code>
  }
          function onBall3Click() {
              var ball3 = document.querySelector('.ball3');
              alert('Ball3');
  
              if (ball3.innerText == 'OFF') {
                  ball3.style.backgroundColor = 'yellow';
                  ball3.innerText = 'ON';
              } else if (ball3.innerText == 'ON') {
                  ball3.style.backgroundColor = 'gray';
                  ball3.innerText = 'OFF';
              }
             
          
          }
          function onBall4Click() {
              var ball4 = document.querySelector('.ball4');
              alert('Ball4');
              var size = prompt(&quot;What should be the size of the ball?&quot;);
  
              if (size &gt; 1000) {
                  alert('Too Big!')
              } else {
                  ball4.style.width = size;
                  ball4.style.height = size;
              }
  
  </code></pre>
  <p>what I need to know is how to disable function onBall4click when the Ball3.innerText = 'OFF'
  and how to enable the function once the Ball3.innerText = 'ON'</p>
  <p>Appreciate all the support.</p>