Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Selecting all elements by specific class name and using toggle to change the class name

Desired Outcome

I want to be able to dynamicly select all the elements with the classname of "input" and change said class name to "input-dm" utilizing toggle. This is for a toggle button which changes the webpage from light mode theme to darkmode theme. I am utilizing toggle because I would like the option to be toggle on and off at the users whim. Any help and being pointed in the right direction would be greatly apprecaited. Thank for your time.

Current Outcome

This is what I currently have which works. It’s long and drawn out and I know there has to be an easier and more dynamic way to do this. Also in this version I identify the element by the id. However, I would rather utilize the class to identify the element as the classes are the same while as the ID should be unique.

<script type="text/javascript" src="/js/jquery-3.7.1.min.js"></script>
function darkmode() {
     document.getElementById("lastname").classList.toggle("input-darkmode");
     document.getElementById("firstname").classList.toggle("input-darkmode");
     document.getElementById("middle").classList.toggle("input-darkmode");
     document.getElementById("date").classList.toggle("input-darkmode");
     document.getElementById("email").classList.toggle("input-darkmode");
     document.getElementById("phone").classList.toggle("input-darkmode");
     document.getElementById("travel-start-date").classList.toggle("input-darkmode");
     document.getElementById("travel-end-date").classList.toggle("input-darkmode");
     document.getElementById("travel_loc").classList.toggle("input-darkmode");
}

Checkbox Calling the function

Dark Mode:&nbsp;<label class="switch"><input onclick="darkmode()" type="checkbox" checked><span class="slider round"></span></label>

Below are some failed attempts that unfortunely it did not work.

document.getElementByClassName("input").classList.toggle("input-darkmode");

var elements = document.getElementsByClassName('input');
for(var i = 0; i < elements.length; i++){
     ([elements]).classlist.toggle("input-darkmode");
}
Tags:

2

Answers


  1. 0

    What this code does…

    • gathers all items which should (not) have dark mode into one variable/constant
    • adds an event listener to the input which is in charge of the dark mode
    • the event then toggles "dark-mode" on all the necessary items
    function toggleDM(){

    const darkModeItems = document.querySelectorAll("#lastname, #firstname, #middle, #date, #email");
    const dmButton = document.querySelector("input#dark-mode");
    dmButton.addEventListener("click", () => {
        darkModeItems.forEach((item) => {
            item.classList.toggle("dark-mode");
        }
    })
}
toggleDM();
    Login or Signup to reply.
  2. 0

    (As requested by OP.)

    In your last sample code block, that should be

    elements[i].classList.toggle("input-darkmode")
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search