When the checkbox is not selected, the content on the page will revert back to its original state

Question

When the checkbox is not selected, the content on the page will revert back to its original state

Is there a way to dynamically change content on a page when a checkbox is checked, and revert it back when the checkbox is unchecked? I don't want to manually set each element's value to default in JavaScript and CSS.

<div class="switch">
    <input type="checkbox" name="checkbox" id="checkbox" onchange="darkmode(this)" />
</div>

<section id="section">
    <p>This is a line</p>
</section>

<script>
    function darkmode(checkboxElem) {
        if (checkboxElem.checked) {
            document.body.style.backgroundColor = "black";
            document.getElementById("checkbox").style.borderColor = "white";
            document.getElementById("section").style.color ="white"; 
        } else {
            document.body.style.backgroundColor = "white";
            document.getElementById("checkbox").style.borderColor = "black";
            document.getElementById("section").style.color ="black"; 
        }
    }   
</script>

If you have a solution for resetting all elements to their defaults without specifying individual values in CSS and JavaScript, please share. Thank you!

javascript html css checkbox onchange

Answer 1

Answer №1

If you're looking for a simple and effective solution, consider designing your dark mode style tied to a body css class and toggling that class using the onchange event directly.

I hope this solution proves helpful for you.

body.dark-mode{
  background-color:black;
}
  body.dark-mode>h1{
    color:red;
  }
  body.dark-mode>p{
    color:white;
  }

<body>
 <input type='checkbox' onchange='document.body.classList.toggle("dark-mode");'>
 <h1>Heading 1</h1>
 <p>Paragraph 1</p>
 ...
</body>

Answer 2

If you're looking for a simple and effective solution, consider designing your dark mode style tied to a body css class and toggling that class using the onchange event directly.

I hope this solution proves helpful for you.

body.dark-mode{
  background-color:black;
}
  body.dark-mode>h1{
    color:red;
  }
  body.dark-mode>p{
    color:white;
  }

<body>
 <input type='checkbox' onchange='document.body.classList.toggle("dark-mode");'>
 <h1>Heading 1</h1>
 <p>Paragraph 1</p>
 ...
</body>

Answer 3

Answer №2

The simplest approach would involve toggling a class on the body element, as demonstrated in the code snippet below. By defining all the dark mode styles within the CSS and ensuring it's placed after the normal styling, you can easily implement a dark mode feature for your website.

function toggleDarkMode(checkboxElem) {
  var body = document.body;
  if (checkboxElem.checked) {
    body.classList.add("dark-mode");
  } else {
    body.classList.remove("dark-mode");
  }
}

.dark-mode {
  color: white;
  background-color: black;
}

<body>
  <div class="switch">
    <input type="checkbox" name="checkbox" id="checkbox" onchange="toggleDarkMode(this)" />
  </div>

  <section id="section">
    <p>This is a line</p>
  </section>
</body>

Answer 4

The simplest approach would involve toggling a class on the body element, as demonstrated in the code snippet below. By defining all the dark mode styles within the CSS and ensuring it's placed after the normal styling, you can easily implement a dark mode feature for your website.

function toggleDarkMode(checkboxElem) {
  var body = document.body;
  if (checkboxElem.checked) {
    body.classList.add("dark-mode");
  } else {
    body.classList.remove("dark-mode");
  }
}

.dark-mode {
  color: white;
  background-color: black;
}

<body>
  <div class="switch">
    <input type="checkbox" name="checkbox" id="checkbox" onchange="toggleDarkMode(this)" />
  </div>

  <section id="section">
    <p>This is a line</p>
  </section>
</body>

When the checkbox is not selected, the content on the page will revert back to its original state

Answer №1

Answer №2

Similar questions

transform constant values into API requests using React

Customize the MUI (JoyUI) Autocomplete feature in React using react-hook-form to display a unique value instead of the label

Console command to change paragraph tag color---Modifying the color

Tips for obtaining a specific sorting order based on a wildcard property name

Font size transition on pseudo elements is not functioning properly in Internet Explorer when using the "em" unit

Encountering an issue with WebDriver in the realm of JavaScript

What is the best way to assign a value to process.env within an npm script?

Troubleshooting: Django project not functioning properly post transfer from Windows to Mac

Can someone please help me figure out how to detect active users within my Next.js application while utilizing Supabase authentication?

Utilizing NodeJS to Refine JSON Data

Extract data from Markit On Demand API using JavaScript and AJAX

How can you calculate the number of elements in a jQuery array and iterate through each of them?

Is your browser tab failing to display the complete URL?

Importing Vue and Vuex modules from separate files

Is it possible to alter the state of one page by clicking a link on another page?

What is the best way to include the ID in a Vue.js Ajax request for posts?

The upload method in flowjs is not defined

Refreshing a sibling component because of data changes in another sibling component within Next JS

Choosing between Vue.prototype, Vue.use, and import for each fileWhen it comes

Creating a stylish zebra pattern using JCrop on the cropping window