Utilizing JavaScript to trigger a series of click events on a single button in order to

Question

Utilizing JavaScript to trigger a series of click events on a single button in order to

I am working on implementing a click event for a checkbox that will add and remove CSS classes using the "classList.toggle" method. Specifically, I want the checkbox to toggle between adding the "xyz" class on the first click, and then adding the "abc" class while removing the "xyz" class on the second click.

  const openModal = document.getElementById('mark-as-gift');
  const modalBg = document.querySelector('.addtnew');
  
  openModal.addEventListener('click', openModalBtn);
 
  function openModalBtn() {
     modalBg.classList.add('menscart2');
      
  }

That's where I currently stand with my JavaScript code. Any assistance would be greatly appreciated!

javascript html css

Answer 1

Answer №1

One way to check if a class is present in an element and remove it if it exists is by using

DOM.className.split(' ').indexOf(yourclassname)

followed by

DOM.classList.remove(yourclassname)

. Here's an example:

const openModal = document.getElementById('mark-as-gift');
const modalBg = document.querySelector('.addtnew');

openModal.addEventListener('click', openModalBtn);

function openModalBtn() {
if(modalBg.className.split(" ").indexOf("menscart2") >= 0) {
modalBg.classList.remove('menscart2');
} else {
modalBg.classList.add('menscart2');
}
console.log(`This element's current class name: ${modalBg.className}`)
}

.menscart2 {
width: 100px;
height: 100px;
background: blue;
}

<input id="mark-as-gift" type="checkbox" />
<div class="addtnew">Hello</div>

Answer 2

One way to check if a class is present in an element and remove it if it exists is by using

DOM.className.split(' ').indexOf(yourclassname)

followed by

DOM.classList.remove(yourclassname)

. Here's an example:

const openModal = document.getElementById('mark-as-gift');
const modalBg = document.querySelector('.addtnew');

openModal.addEventListener('click', openModalBtn);

function openModalBtn() {
if(modalBg.className.split(" ").indexOf("menscart2") >= 0) {
modalBg.classList.remove('menscart2');
} else {
modalBg.classList.add('menscart2');
}
console.log(`This element's current class name: ${modalBg.className}`)
}

.menscart2 {
width: 100px;
height: 100px;
background: blue;
}

<input id="mark-as-gift" type="checkbox" />
<div class="addtnew">Hello</div>

Answer 3

Answer №2

const showModalBtn = document.querySelector("modalButton")
const modalContainer = document.querySelector('.newModal');
const styles = ["style1", "style2"];
let isShown = false;

showModalBtn.addEventListener('click', showModal);

function showModal() {
    modalContainer.classList.add(styles[+ isShown]);
    modalContainer.classList.remove(styles[+ !isShown]);
    isShown = !isShown;
}

Answer 4

const showModalBtn = document.querySelector("modalButton")
const modalContainer = document.querySelector('.newModal');
const styles = ["style1", "style2"];
let isShown = false;

showModalBtn.addEventListener('click', showModal);

function showModal() {
    modalContainer.classList.add(styles[+ isShown]);
    modalContainer.classList.remove(styles[+ !isShown]);
    isShown = !isShown;
}

Answer 5

Answer №3

To make things simpler and tidier, consider changing the classes you're using to toggle a single class instead. You can use :not(.class) to select the element if it does not have the class.

const openModal = document.querySelector('.toggle');
const modalBg = document.querySelector('.modal');
  
openModal.addEventListener('click', openModalBtn);
 
function openModalBtn() {
  modalBg.classList.toggle('open');
}

.modal.open {
  background-color: green;
  color: white;
}
.modal:not(.open) {
  background-color: red;
  color: white;
}

<button class="toggle">Toggle</button>
<div class="modal">Modal</div>

If you need two classes but are indifferent about the "invalid states" where the element has none or both classes, you can simply do something like this:

  const openModal = document.querySelector('.toggle');
const modalBg = document.querySelector('.modal');
  
openModal.addEventListener('click', openModalBtn);
 
function openModalBtn() {
  modalBg.classList.toggle('open');
  modalBg.classList.toggle('closed');
}

.modal.open {
  background-color: green;
  color: white;
}
.modal.closed {
  background-color: red;
  color: white;
}

<button class="toggle">Toggle</button>
<div class="modal closed">Modal</div>

If handling invalid states is important to you, establish some guidelines on how to deal with them.

Answer 6

To make things simpler and tidier, consider changing the classes you're using to toggle a single class instead. You can use :not(.class) to select the element if it does not have the class.

const openModal = document.querySelector('.toggle');
const modalBg = document.querySelector('.modal');
  
openModal.addEventListener('click', openModalBtn);
 
function openModalBtn() {
  modalBg.classList.toggle('open');
}

.modal.open {
  background-color: green;
  color: white;
}
.modal:not(.open) {
  background-color: red;
  color: white;
}

<button class="toggle">Toggle</button>
<div class="modal">Modal</div>

If you need two classes but are indifferent about the "invalid states" where the element has none or both classes, you can simply do something like this:

  const openModal = document.querySelector('.toggle');
const modalBg = document.querySelector('.modal');
  
openModal.addEventListener('click', openModalBtn);
 
function openModalBtn() {
  modalBg.classList.toggle('open');
  modalBg.classList.toggle('closed');
}

.modal.open {
  background-color: green;
  color: white;
}
.modal.closed {
  background-color: red;
  color: white;
}

<button class="toggle">Toggle</button>
<div class="modal closed">Modal</div>

If handling invalid states is important to you, establish some guidelines on how to deal with them.

Answer 7

Answer №4

If you prefer, you can alternatively utilize a basic .toggle() function with your classList, similar to what you attempted in your original script:

const toggleModal = document.getElementById('toggle-modal');
const modalContent=document.querySelector(".modal-content");
  
toggleModal.addEventListener('click', toggleModalClasses);
 
function toggleModalClasses() {
 modalContent.classList.toggle('active');
 modalContent.classList.toggle('inactive');
}

.active {opacity:1}
.inactive {opacity:0}

<button id="toggle-modal">Toggle Modal</button>
<div class="modal-content active">This is the content of the modal.</div>

Answer 8

If you prefer, you can alternatively utilize a basic .toggle() function with your classList, similar to what you attempted in your original script:

const toggleModal = document.getElementById('toggle-modal');
const modalContent=document.querySelector(".modal-content");
  
toggleModal.addEventListener('click', toggleModalClasses);
 
function toggleModalClasses() {
 modalContent.classList.toggle('active');
 modalContent.classList.toggle('inactive');
}

.active {opacity:1}
.inactive {opacity:0}

<button id="toggle-modal">Toggle Modal</button>
<div class="modal-content active">This is the content of the modal.</div>

Answer 9

Answer №5

To enable toggling in the DOM, you have the option of using the toggle method or utilizing a boolean variable to determine if the checkbox is selected. Check out this link for more information from the official MDN Docs.

Here's an example showcasing the toggle method:

var item = document.getElementById("myItem");
item.classList.toggle("active");

Hopefully, that clarifies things for you :)

Answer 10

To enable toggling in the DOM, you have the option of using the toggle method or utilizing a boolean variable to determine if the checkbox is selected. Check out this link for more information from the official MDN Docs.

Here's an example showcasing the toggle method:

var item = document.getElementById("myItem");
item.classList.toggle("active");

Hopefully, that clarifies things for you :)

Utilizing JavaScript to trigger a series of click events on a single button in order to

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Jumping transitions in thumbnail images

Gridsome server-side rendering encounters issues with Auth0 authentication when the window object is not defined

Implementing hashing with resumable.js

A guide on how to initiate a click event in Angular 5 using JQuery

"Exploring the new features of Node.js 14 with ECMAScript modules

How can we delay UI updates until API calls have finished processing a chunk of requests in Redux-Saga without affecting the responsiveness of the user interface?

Transform the string by eliminating any spaces and new lines before converting it into a JSON object

"I'm encountering an issue with the discord.js module when I try to launch my bot using node. Any ideas on how

What is the best way to submit your CSS feature suggestions?

Is it possible to upload numerous profiles into the MYSQL database using this WP template?

NextJS configuration facing an issue with rewrite rules not functioning as intended

How can I efficiently retrieve the "value" of a cookie and store it in a .txt file using Python?

Error occurs when attempting to instantiate a class with parameters that do not match any available constructor signatures

Create a configuration featuring filter options similar to Notion's functionality

Content Security Policy directive violation: Chrome extension policy error occured due to refusal to execute inline event handler

Customizing the appearance of two separate tables

How can I relocate an object to a different position within THREE.JS?

The intricate dance between JAVA and HTML

Executing Javascript to populate a div element with content based on its CSS class

Is it possible for a property to be null or undefined on class instances?