HTML/JAVASCRIPT/CSS simple function logic failure

Question

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>

If you log ball3.style.backgroundColor you will see it's blank and not "grey", because the grey is assigned via CSS and not by directly changing the element's background color. Suggest you change logic to (if ball is yellow) make it grey (else) make it yellow. You could also swap CSS classes and not modify the element's style directly. — James
– James, Commented Sep 29, 2022 at 19:09
I couldn't quite understand exactly.. I mean, I was sure I have an access through JAVASCRIPT to the CSS Styling..? — dani_l_n
– dani_l_n, Commented Sep 29, 2022 at 19:20
If you want to get the final result of all the styling (CSS or directly) on an element, see getComputedStyle — James
– James, Commented Sep 29, 2022 at 19:22

jespermeller · Accepted Answer · 2022-09-29 19:12:26Z

2

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)

    }

answered Sep 29, 2022 at 19:12

jespermeller

665 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

HTML/JAVASCRIPT/CSS simple function logic failure

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related