HTML/JAVASCRIPT/CSS simple function logic failure

September 29, 2022

My issue is with function onBall3Click1 (The code is at the bottom).

The ball, on click, is supposed to function as a lightbulb: when it’s ON -> YELLOW color within ball, when it’s OFF -> GRAY.

I have been covering the logic behind it for way too long for something so simple, and I just can’t find the issue..

When I click on it, it changes the text to ‘ON’, but the colour remains gray..when it should be yellow.

Thanks in advance!

<html>

<head>

  <style>
    body {
      background-color: black;
      text-align: center;
    }
    
    h1 {
      color: white;
    }
    
    div {
      width: 100px;
      height: 100px;
      margin: auto;
      margin-bottom: 10px;
      border-radius: 50%;
      transition: 0.3s;
      line-height: 50px;
      color: black
    }
    
    .ball1 {
      background-color: yellow;
      border: 6px solid gray;
      color: black
    }
    
    .ball2 {
      background-color: orange;
    }
    
    .ball3 {
      background-color: gray;
    }
    
    .ball4 {
      background-color: brown;
    }
  </style>
</head>

<body>
  <h1>The Ball</h1>

  <div class="ball1" onclick="onBall1Click()">
    GROW 250 ORANGE
  </div>
  <div class="ball2" onclick="onBall2Click()">
    GROW+50 SHRINK-50
  </div>
  <div class="ball3" onclick="onBall3Click1()">
    OFF
  </div>
  <div class="ball4" onclick="onBall4Click()">
    PROMPT
  </div>

  <script>
    var ball1Size = 100;
    var ball1SizeStep = 50;

    function onBall1Click() {
      var ball1 = document.querySelector('.ball1');
      ball1Size = ball1Size + 50;

      if (ball1Size > 400) {
        ball1Size = 100;
      }
      ball1.innerText = ball1Size;
      ball1.style.width = ball1Size;
      ball1.style.height = ball1Size;

      ball1.innerText = ball1Size;
      if (ball1Size == 250) {
        ball1.style.color = 'Orange';
      } else {
        ball1.style.color = 'black'
      }


    }

    var ball2Size = 100;
    var ball2SizeStep = 50;

    function onBall2Click() {
      var ball2 = document.querySelector('.ball2');
      ball2Size += ball2SizeStep;

      if (ball2Size === 400) {
        ball2SizeStep = -50;
      } else if (ball2Size === 100) {
        ball2SizeStep = 50;
      }
      if (ball2Size > 100) {
        ball2.style.backgroundColor = 'red';
      } else if (ball2Size === 100) {
        ball2.style.backgroundColor = 'Orange';
      }



      ball2.innerText = ball2Size;
      ball2.style.width = ball2Size;
      ball2.style.height = ball2Size;


    }

    function onBall3Click1() {
      var ball3 = document.querySelector('.ball3');
      console.log("HII0");
      if (ball3.innerText == 'OFF') {
        ball3.innerText = 'ON';
      } else if (ball3.innerText == 'ON') {
        ball3.innerText = 'OFF'
      }
      console.log(ball3.style.backgroundColor)
      if (ball3.style.backgroundColor === 'gray') {
        console.log("HII1");
        ball3.style.backgroundColor = 'Yellow';
      } else if (ball3.style.backgroundColor == 'Yellow') {
        console.log("HII1");
        ball3.style.backgroundColor = 'gray'
      }

    }

    var ball4Size = 100;

    function onBall4Click() {
      var ball4 = document.querySelector('.ball4');
      var user_input = prompt('Write ball size number 4 but do not exaggerate :   ')
      let user_input_int = parseInt(user_input)
      console.log(user_input_int);
      if (user_input_int < 1000) {
        ball4.style.width = user_input_int;
        ball4.style.height = user_input_int;
      } else {
        alert("Too big!");
      }
    }
  </script>
</body>

</html>

>Solution :

You could merge the two if/elseif chains in the onBall3Click1 function like so:

    function onBall3Click1() {
        var ball3 = document.querySelector('.ball3');
        console.log("HII0");
        if (ball3.innerText == 'OFF') {
            ball3.innerText = 'ON';
            ball3.style.backgroundColor = 'yellow';
        } else if (ball3.innerText == 'ON') {
            ball3.innerText = 'OFF'
            ball3.style.backgroundColor = 'gray'
        }
        console.log(ball3.style.backgroundColor)

    }