Change styles when checking checkbox with JavaScript

Question

I'm trying (with no success) to create a checkbox that changes some style properties of the body when checked, something like this:

<script>
  const x = document.getElementById('y');
  if (x.checked == true) { 
    document.body.style.setProperty('property', 'value');
  } else {
    document.body.style.setProperty('property', 'value');
  }
</script>

What am I doing wrong? 🤔

Thanks in advance!

Maybe consider going the pure CSS route: stackoverflow.com/q/44804022/691711 — zero298
– zero298, Commented Feb 25, 2019 at 18:12
@zero298 Lewis is wanting to change the styles of the body element, not the checkbox itself. — Sean
– Sean, Commented Feb 25, 2019 at 18:13
Computers do not think. They do one order after another. If you do if(...) you tell the computer to check the checked value of x, after that is done he will continue doing other things. He won't check again (if you aren't telling him to do so) — Jonas Wilms
– Jonas Wilms, Commented Feb 25, 2019 at 18:14
@sean You can still change the style of the body by changing its class — nick zoum
– nick zoum, Commented Feb 25, 2019 at 18:32

nick zoum · Accepted Answer · 2019-02-25 18:25:03Z

2

You need to use an event listener and run that script inside the listener. What you are doing in your code is setting the color once when the script is run, you haven't told the program to check every time the checkbox is changed.

const checkBox = document.getElementById('y');
checkBox.addEventListener("change", updateBackground);
updateBackground();

function updateBackground() {
  document.body.style.backgroundColor = checkBox.checked ? "red" : "blue";
}

<input id="y" type="checkbox" />

You could also just a class instead and change or remove the class name.

const checkBox = document.getElementById('y');
checkBox.addEventListener("change", updateBackground);
updateBackground();

function updateBackground() {
  document.body.className = checkBox.checked ? "" : "blue";
}

body {
  background-color: red;
}

body.blue {
  background-color: blue;
}

<input id="y" type="checkbox" />

edited Feb 25, 2019 at 18:25

answered Feb 25, 2019 at 18:12

nick zoum

6,6538 gold badges43 silver badges93 bronze badges

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

2 Comments

lewislbr Over a year ago

Just tested it on a blank page and it works flawlessly. The problem is in my project structure, will check it. Thanks!

nick zoum Over a year ago

You need to check 2 things. 1. that the id you are getting is correct. 2. that the element exists at the time you are trying to get it. A couple of ways to do that is by adding the script tag at the end. Add an async attribute to your script tag. Use a setTimeout and get the element after a couple of milliseconds. Run the script after everything is rendered using the DOMContentLoaded event

Collectives™ on Stack Overflow

Change styles when checking checkbox with JavaScript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related