Javascript consecutive click event on same button to change css-CodePudding

I would like to create a click event on a check box and add a CSS class. I can use "classList.toggle" to add and remove the a CSS class by clicking the button 2 times. This is what I would like to do. When I click the checkbox for the first, I would like to add "xyz" class and when I click the same check box, I would like to add "abc" class and remove the "xyz" class.

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

Here is my startet JS code. Thanks for the help

CodePudding user response：

Use DOM.className.split(' ').indexOf(yourclassname) to check inside class if it contains then remove it by call DOM.classList.remove(yourclassname), 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(`Class name this element have: ${modalBg.className}`) 
  }

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

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

CodePudding user response：

const openModalBtn = document.querySelector("yourButton")
const modalBg = document.querySelector('.addtnew');
const classes = ["xyz", "abc"];
let toggled = false;

openModal.addEventListener('click', openModalBtn);

function openModalBtn() {
    modalBg.classList.add(classes[  toggled]);
    modalBg.classList.remove(classes[  !toggled]);
    toggled = !toggled;
}

CodePudding user response：

If you can change the classes you're using, it'd be easier and cleaner to just toggle a single class, and use :not(.class) to select the element if it doesn't 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 >Toggle</button>
<div >Modal</div>

If you need two classes anyway, but you don't care about the "invalid states" (the element has none or both classes), you can just do something like that:

  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 >Toggle</button>
<div >Modal</div>

Finally, if you do care about invalid states, first you have to come up with some semantics on how to handle them.

CodePudding user response：

Or you can use a plain .toggle() on your classList, as you tried to do in your own script:

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

.green {color:Green}
.red {border: solid red 1px}

<button id="mark-as-gift">toggle classes</button>
<div >This is the modal div.</div>

CodePudding user response：

you can use the toggle DOM method, or instead you can use a boolean can that will check whether the checkbox is checked or not. click here to go to the official MDN Docs

Code example of the toggle method:

  var element = document.getElementById("myDIV");
  element.classList.toggle("mystyle");

I hope it helped :)