Modify button text with javascript based on the body's class selection

Question

Modify button text with javascript based on the body's class selection

I successfully implemented a dark and light theme on my website following this helpful guide. The two color schemes are defined as classes in CSS and dynamically applied to the body element using JavaScript. The script automatically selects the theme based on the user's operating system preference, but users can also manually switch between themes by clicking a button, which then overrides the OS settings. The selected preference is saved locally using localStorage.

As I continue learning JavaScript, I attempted to create a function that changes the text of the theme switch button depending on the currently applied theme:

    if (document.body.classList.contains("dark-theme")) {
      document.getElementById("theme-btn").innerHTML = "Light Mode";
    } else if (document.body.classList.contains("light-theme") {
      document.getElementById("theme-btn").innerHTML = "Dark Mode";
    }

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
</head>
<body class="dark-theme">
  
  <button class="btn-toggle" id="theme-btn">Dark Mode</button>

</body>
</html>

Although this approach seems to be working fine, I am open to suggestions for improvements or alternative methods to achieve the same outcome. Any advice or ideas would be greatly appreciated!

javascript html css

Answer 1

Answer №1

I managed to get things working, but it's not ideal. My solution is a bit messy and still has some issues. Here's what I have so far. The problem with my initial attempt is that both classes, "light-mode" and "dark-mode", exist in the body's classList, but they aren't being "applied"? Without a js-method to determine which class is active, this approach won't work - because both conditions in the if/else statement are always true, leading to the if-clause always being executed.

So...I came up with a simple (yet intricate) set of functions to achieve what I wanted. Essentially, the script checks localStorage to see if a theme has already been saved and applies the appropriate button text. However, the if-else statement is repeated every time the button is clicked (the same if/else clause appears twice in the code, is there a better way to handle this?)

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
</head>

<body>
  <button class="btn-toggle" id="theme-btn">Change Theme</button>
  <script>
    /* Change "theme-btn".innerHTML based on color theme in localStorage */
    if (localStorage.getItem("theme") == "dark") {
      document.getElementById("theme-btn").innerHTML = "Light Mode";
    } else if (localStorage.getItem("theme") == "light") {
      document.getElementById("theme-btn").innerHTML = "Dark Mode";
    }
    btn.addEventListener("click", function() { /* Listen for Event-change in button and check localStorage for theme change */
      if (localStorage.getItem("theme") == "dark") {
        document.getElementById("theme-btn").innerHTML = "Light Mode";
      } else if (localStorage.getItem("theme") == "light") {
        document.getElementById("theme-btn").innerHTML = "Dark Mode";
      }
    });
  </script>
</body>

Overall, this works well with the rest of my site. The only issue arises when there's no key stored in localStorage yet, as the correct text isn’t applied. Therefore, this solution only functions properly after the button is manually clicked…and doesn't cater to new visitors.

In search of an alternative solution, I thought about checking the OS' preference first before monitoring the button-click. Unfortunately, my attempts were unsuccessful – I will detail what I tried tomorrow.

Answer 2

I managed to get things working, but it's not ideal. My solution is a bit messy and still has some issues. Here's what I have so far. The problem with my initial attempt is that both classes, "light-mode" and "dark-mode", exist in the body's classList, but they aren't being "applied"? Without a js-method to determine which class is active, this approach won't work - because both conditions in the if/else statement are always true, leading to the if-clause always being executed.

So...I came up with a simple (yet intricate) set of functions to achieve what I wanted. Essentially, the script checks localStorage to see if a theme has already been saved and applies the appropriate button text. However, the if-else statement is repeated every time the button is clicked (the same if/else clause appears twice in the code, is there a better way to handle this?)

<!DOCTYPE html>
<head>
  <meta charset="utf-8" />
</head>

<body>
  <button class="btn-toggle" id="theme-btn">Change Theme</button>
  <script>
    /* Change "theme-btn".innerHTML based on color theme in localStorage */
    if (localStorage.getItem("theme") == "dark") {
      document.getElementById("theme-btn").innerHTML = "Light Mode";
    } else if (localStorage.getItem("theme") == "light") {
      document.getElementById("theme-btn").innerHTML = "Dark Mode";
    }
    btn.addEventListener("click", function() { /* Listen for Event-change in button and check localStorage for theme change */
      if (localStorage.getItem("theme") == "dark") {
        document.getElementById("theme-btn").innerHTML = "Light Mode";
      } else if (localStorage.getItem("theme") == "light") {
        document.getElementById("theme-btn").innerHTML = "Dark Mode";
      }
    });
  </script>
</body>

Overall, this works well with the rest of my site. The only issue arises when there's no key stored in localStorage yet, as the correct text isn’t applied. Therefore, this solution only functions properly after the button is manually clicked…and doesn't cater to new visitors.

In search of an alternative solution, I thought about checking the OS' preference first before monitoring the button-click. Unfortunately, my attempts were unsuccessful – I will detail what I tried tomorrow.

Modify button text with javascript based on the body's class selection

Answer №1

Similar questions

I'm new to this, but can someone explain why I'm being redirected to the register_db.php page when I click on the register button?

Prepending a string to the key of a JSON object using JavaScript

Using jQuery to retrieve the id with [id^=''] when making an AJAX request, then populating and generating a table based on the retrieved data

Finding the distance between two coordinates using Mapbox is easy once you understand how to utilize

The Javascript code compiled in Rails 5 is only functioning on the production environment

Is it possible for Django's trans tags to incorporate HTML tags?

Issue with AJAX POST request: PHP failing to establish session

Modifying a table row in real-time with the power of JQuery/JavaScript

the overflow issue with Summernote's dropdown menu

Place an element that exceeds 100% in size at the center

I've managed to mess up my code again; local storage was working fine, and now it's not. I'm completely clueless

Toggle the display of selected options based on the presence of multiple classes within a td element

The Socket.io server is experiencing issues with the "connection" event not firing, and the client event is also not being triggered

Whenever I attempt to search for an element within my useState array, my component automatically re-renders

Shifting around haphazardly positioned crates using the cursor

Is there a way to have the collapsible content automatically expanded upon loading?

The Vue plugin encountered an issue with an error message stating "Uncaught SyntaxError: Unexpected token

Difficulties arise when trying to implement the jQuery SVG animation plugin on a straight line

Utilizing Bootstrap to set a dynamic background image that spans the entire width of a table

NodeJS is throwing a `ReferenceError` because the `io` variable is not