带复选框的暗模式开关按钮

Question

Console.logs are not showing. And my functions are not working. I tried several different functions and solutions but none of them worked for me. Where is the problem can anyone help?

this my html

<div class="switch-toggle darkmodecheckbox">
              <input type="checkbox" name="checkbox" id="darkmodeonoff" />
              <label for="darkmodeonoff"></label>
            </div>

this my js;

var checkbox = document.querySelector("input[name=checkbox]");
    console.log(checkbox);

    checkbox.addEventListener("change", (e) => {
      if (e.target.checked) {
        darkmode();
        console.log("Checkbox is checked..");
      } else {
        darkmodeoff();
        console.log("Checkbox is not checked..");
      }
    });

Answer 1

bro where is your darkmode() and darkmodeoff() functions? Try add them like at the below and check out are you gonna get any alert or not? Also if you see any warning on the console, please share

 const darkmode = () =>{
        alert('dark')
    }
    const darkmodeoff = () =>{
        alert('light')
    }

Answer 2

Try using classList.toggle :

checkbox.addEventListener("change", (e) => {
      const example = document.querySelector('.containerThatYouWantUse')
      example.classList.toggle('darkModeClass')
    });

Answer 3

You can let darkmode and darkmodeoff log what you want

const darkmode = () =>{
    console.log("Checkbox is checked..");
}
const darkmodeoff = () =>{
    console.log("Checkbox is not checked..");
}

Then call it using if statement

if (e.target.checked) {
    darkmode();
  } else {
    darkmodeoff();
  }
});