Toggle button to change background colour

Hi. Just trying to toggle a switch to change the background colour from ‘none’ to ‘yellow’. any ideas why my code isn’t working would be appreciated. thanks.

1 Like

Can you show us your code so far and maybe the html page as well? It’d be nice to know what your code looks like and what you’ve been trying to do so far. :slight_smile:

1 Like

Oh sorry yes I completely forgot to post the link to the code.

Switch (codepen.io)

1 Like
<button id='switch' onclick='toggleSwitch'>

Okay looking at your HTML first. You forgot to supply the id of the bulb top to your function. Even in callbacks you need to apply parameters.

Going around to your JS

function toggleSwitch(bulb_top) {
  var lightbulbColour = document.getElementById(bulb_top).style.backgroundColor;
  if(lightbulbColour == 'none') {
    document.getElementById(bulb_top).style.backgroundColour = 'yellow';
  }  
  else {   
    document.getElementById(bulb_top).style.backgroundColour = 'none';
  }  
}

While it is expected for lightbulbColour to be equal “none”, it’s an empty string when the web page first starts up. It’s going to need to be changed in both places.

Lastly document.getElementById(bulb_top).style.backgroundColour should be document.getElementById(bulb_top).style.backgroundColor.

Hope this helps. If any of this unclear or confusing, please let me know and I will try to help. :slight_smile:

1 Like

thankyou. I think i’ve corrected most of the javascript with your help

function toggleSwitch(lightbulbColour, bulb_top) {
  
  var lightbulbColour = document.getElementById('bulb_top').style.backgroundColor = 'none';
  
  if(lightbulbColour === 'none') {
    lightbulbColour = document.getElementById('bulb_top').style.backgroundColor = 'orange';
  } 
  else if(lightbulbColour !== 'none') {   
    lightbulbColour = document.getElementById('bulb_top').style.backgroundColor = 'none';
  }  
}

and added the following css to the bulb_top

background-color: none;

The code now turns the bulb orange on first click but does not turn back to ‘none’ or toggle onclick. Any help would be appreciated

1 Like

Every time toggleSwitch runs you are setting lightbulbColour to none.

If you just need to toggle the color I would suggest using a CSS class and the classList.toggle() method.

<button>Toggle color</button>
.btn-color {
  background-color: orange;
}
document.querySelector("button").addEventListener("click", ({ target }) => {
  target.classList.toggle("btn-color");
});
1 Like

Struggling to see why the suedo element :checked doesn’t work either? The code is pretty basic.

#checkbox:checked ~ .bulb_top {
  background-color: yellow;
}

Switch - cpc-light-dark codepen challenge

1 Like

The tilde only works if the two elements share the same parent.

1 Like

You can use the :has selector, just know it is still a fairly new selector. You can check the browser compatibility section.

body:has(input[type='checkbox']:checked) .bulb_top {
  background-color: yellow !important;
}
2 Likes

thank you that works perfectly

2 Likes