Question 186981 in Html Question posted in
Some basic documentation can be found here.

Html – I'm trying to teach myself the classList.toggle function & I can't make it pass a class to an element

I got Bing AI to write me a basic toggle button, that should switch between light mode & dark mode. I parsed it into, I suppose, 4 files. An HTML file, an SASS file that compiles to CSS, and a Javascript file. However, the button doesn’t click or run.

I would ideally like to put a console.log() in there to test what’s happening with the button, but truthfully, I don’t know how or where to write that. Since I asked Bing, it used concepts that I haven’t learned yet, & it says the code works perfectly, but it doesn’t on any of my browsers. It works when I add the class "dark-mode" manually to the body and html tag, but the whole point of learning addEventListener & classlist.toggle(), is that I can use a button to toggle a class into and out of a particular element.

Basically, I want to learn to create a super basic dark mode, for a super basic HTML page.

body {
  background-color: rgba(255, 247, 174, 0.87);
  color: black;
}

body.dark-mode {
  background-color: rgb(62, 74, 236);
  color: white;
}

#darkToggle {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: #2ab1ce;
  color: white;
  font-weight: bold;
}

#darkToggle.dark-mode {
  background-color: #ea4b3c;
  color: white;
  font-weight: bold;
}

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="../../src/style/css/dom.css">
  <script src="../../src/script/dom.js" defer />
</head>
<body>
  <h1>Dark Mode Toggle Button</h1>
  <button id="darkToggle">Dark mode</button>
</body>
</html>

// get the button element by id
let button = document.getElementById("darkToggle");

// add a click event listener to the button
button.addEventListener("click", function () {
  // toggle the dark-mode class on the body and button elements
  document.body.classList.toggle("dark-mode");
  button.classList.toggle("dark-mode");

  // check if the body element has the dark-mode class
  if (document.body.classList.contains("dark-mode")) {
    // change the button text to light mode
    button.textContent = "Light mode";
  } else {
    // change the button text to dark mode
    button.textContent = "Dark mode";
  }
});

Here is a link to Codepen

It works on Codepen.io but not in Firefox or Edge locally. I swear all my links are correct. Edit: I am now uncertain whether my links are correct.

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I initially solved it by moving my script tag underneath my html altogether. Then I queried Bing about it & it mentioned that defer in the script tag also holds the js from running before the html is parsed. My issue was in how I was linking my js in my script tag. My solution was this:

    <script src="../../src/script/dom.js" defer></script>

    Thanks everyone.


  2. 0

    Did you link your.js file to .html file? on CodePen it’s linked automatically

    <script src="./your-js-file.js" defer />
    Login or Signup to reply.
  3. 0

    The issue is because your Script is loaded before the HTML. Move your script to bottom, just before the closing body tag </body>, or try to add async in the script to make it download asynchronously.

    Try below code:

    <!DOCTYPE html>
<html>
<head>

<style>
body {
  background-color: rgba(255, 247, 174, 0.87);
  color: black;
}

body.dark-mode {
  background-color: rgb(62, 74, 236);
  color: white;
}

#darkToggle {
  width: 100px;
  height: 40px;
  border: none;
  border-radius: 20px;
  background-color: #2ab1ce;
  color: white;
  font-weight: bold;
}

#darkToggle.dark-mode {
  background-color: #ea4b3c;
  color: white;
  font-weight: bold;
}
</style>
</head>
<body>
 <h1>Dark Mode Toggle Button</h1>
  <button id="darkToggle">Dark mode</button>

</body>

<script>

    let button = document.getElementById("darkToggle");
    
    
    button.addEventListener
    // add a click event listener to the button
    button.addEventListener("click", function () {
        console.log(" ************* ");
      // toggle the dark-mode class on the body and button elements
      document.body.classList.toggle("dark-mode");
      button.classList.toggle("dark-mode");
    
      // check if the body element has the dark-mode class
      if (document.body.classList.contains("dark-mode")) {
        // change the button text to light mode
        button.textContent = "Light mode";
      } else {
        // change the button text to dark mode
        button.textContent = "Dark mode";
      }
    });
    
    </script>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search