JavaScript click handlers for styling elements

Question

JavaScript click handlers for styling elements

I have successfully created a CSS element to invert the entire website for a dark mode effect. I was able to use a key code to toggle the CSS element and it worked perfectly. However, my challenge now is that I want to implement a button to toggle the element.

CSS >

.dark-mode{
    filter: invert(1) hue-rotate(180deg)
}

.invert{
    filter: invert(1) hue-rotate(180deg)
}

Javascript >

    document.onkeypress = function (e) {
        e = e || window.event;
        
        if(e.keyCode === 13){
            document.documentElement.classList.toggle('dark-mode');
            
            document.querySelectorAll('.inverted').forEach((result) => {
                result.classList.toggle('invert');
            })
        }
    }

While these codes work well, I am looking for a way to incorporate a button to toggle it instead.

javascript html css

Answer 1

Answer №1

<wrench activated="toggle()">Toggle</span>

Implement this function in conjunction with the invert() method you previously created.

Answer 2

<wrench activated="toggle()">Toggle</span>

Implement this function in conjunction with the invert() method you previously created.

Answer 3

Answer №2

Organize the toggle code by creating a function with a specific name. Utilize this function in both the keypress listener and a click listener on the button.

function switchTheme() {
  document.documentElement.classList.toggle('dark-mode');

  document.querySelectorAll('.inverted').forEach((result) => {
    result.classList.toggle('invert');
  })
}

document.querySelector("toggle-scheme").addEventListener("click", switchTheme);

document.addEventListener("keypress", function(e) {
  if (e.keyCode === 13) {
    switchTheme();
  }
});

Answer 4

Organize the toggle code by creating a function with a specific name. Utilize this function in both the keypress listener and a click listener on the button.

function switchTheme() {
  document.documentElement.classList.toggle('dark-mode');

  document.querySelectorAll('.inverted').forEach((result) => {
    result.classList.toggle('invert');
  })
}

document.querySelector("toggle-scheme").addEventListener("click", switchTheme);

document.addEventListener("keypress", function(e) {
  if (e.keyCode === 13) {
    switchTheme();
  }
});

JavaScript click handlers for styling elements

Answer №1

Answer №2

Similar questions

Issue: AngularJS not refreshing view after receiving server response

Route creation unsuccessful while attempting to both download a file and send a response message, resulting in the error "Headers cannot be set after they have been sent to the client."

What could be causing the lack of alignment in my div element?

The flipping action will only occur on the initial card

Warning: Django is currently dysfunctional

Vuejs tutorial: Toggle a collapsible menu based on the active tab status

Is there a way I can implement a user-friendly playlist feature in my object-oriented HTML5 JS audio player that allows users

The data type of Subscription: prototype, NOT ASSIGNED

Creating a Next.js application that retrieves mock data and dynamically presents it on the user interface

JavaScript - Navigating through JSON object in reverse (from leaf to root) direction

Converting a comma-separated list into an array and filling a dropdown menu with the values

How to Eliminate Image Flickering While Loading in a React Component

What are the best practices for protecting a web application with login and database in the year 2022?

The Static Interface Binding in TypeScript

Nuxt.js has exceeded the maximum call stack size

Issue with height in self-invoking function not functioning correctly

Tips for inserting an element in the middle of two elements using HTML

Is an array literal considered an object in JavaScript?

How to maintain HTML list items in a single line while overlaying text

Issue: "Download unsuccessful - File not found" message received while attempting to download a file from an application hosted on Heroku