CODEWITHSUNDEEP
javascripthtmlcssdom
Ajax
Ajax

Reputation: 80

"classList.toggle" doesn't work for buttons

I've been creating a website and I have made a night mode for it. Night Mode works fine for everything except buttons. How can I fix this problem?

HTML:

<section class="form" id="contact">
    <div class="form-main">
        <form>              
        <button type="button" id="pay">
            <p class="p">Proceed To Pay</p> 
        </button>       
    </form>
    </div>
</section>

CSS:

.darkTheme{
background-color: #000;
color: #fff;
transition: all 0.3s;}

JS:

let payBtn = document.querySelector('.p');
btn.addEventListener('click' , changeBg);

function changeBg(){
    console.log(payBtn);
    payBtn.classList.add('darkTheme');
}

Upvotes: 0

Views: 1249

Answers (4)

Irfan wani
Irfan wani

Reputation: 5075

let payBtn = document.querySelectorAll('button');
document.getElementById("dm").addEventListener('click', function() {
           payBtn.forEach(function(btn) {
        if(!btn.classList.contains('darkTheme')) {
            btn.classList.add('darkTheme');
            document.getElementById('dt-text').innerHTML = 'change to light';
        }else {
            btn.classList.remove('darkTheme');
            document.getElementById('dt-text').innerHTML = 'change to dark';
        }
       
    });
});
.darkTheme{
background-color: #000;
color: #fff;
transition: all 0.3s;}
<section class="form" id="contact">
    <div class="form-main">
        <form>              
        <button type="button">
            <p class="p">Proceed To Pay</p> 
        </button> 
        <button type="button">
            <p class="p">Proceed To Pay 2</p> 
        </button> 
        <button type="button">
            <p class="p">Proceed To Pay 3</p> 
        </button> 
        <button type="button" id="dm"><p id='dt-text'>change to dark</p></button>     
    </form>
    </div>
</section>

Instead of selecting the paragraph element inside the button, select the button.

Upvotes: 1

Ajax
Ajax

Reputation: 80

After many attempts I found a way to fix the problem but it's kind of a long journey. First I wanted to use "classList.toggle" for the class that was in CSS. Since it didn't work as I wanted, I selected the button with Id;

let pay = document.getElementById('pay');

Then instead of using "classList.toggle" for the class in CSS I used conditional statements to get the same result I wanted.

if(pay.classList.contains('hello')){
    pay.classList.remove('hello');
    pay.style.backgroundColor = "#000";
    pay.style.color = "#fff";
}else{
    pay.style.backgroundColor = "#fff";
    pay.style.color = "#000";
    pay.className = "hello";
}

So I made 'hello' class to get the toggle effect and used style to get the desired output. Finally it worked. Here the full project hosted on codepen: https://codepen.io/kisaraf/pen/vYXJwLE Thank You for everyone who tried to help me.

Upvotes: 3

Kevin Shuguli
Kevin Shuguli

Reputation: 1749

html

<section class="form" id="contact">
    <div class="form-main">
        <form>              
        <button type="button" id="pay">
            <p class="p">Proceed To Pay</p> 
        </button>       
    </form>
    </div>
</section>

css

.darkTheme{
background-color: #000;
color: #fff;
transition: all 0.3s;}

js

let payBtn = document.querySelector('button');
payBtn.addEventListener('click' , changeBg);

function changeBg(){
    console.log(payBtn);
    payBtn.classList.toggle('darkTheme');
}

Upvotes: 0

NigelDcruz
NigelDcruz

Reputation: 927

Check this out. You'll be able to easily toggle between the dark theme and the normal theme with this approach.

let payBtn = document.querySelector("#pay");
payBtn.addEventListener("click", changeBg);

function changeBg() {
  console.log(payBtn);
  payBtn.classList.toggle("darkTheme");
}
.darkTheme {
  background-color: #000;
  color: #fff;
  transition: all 0.3s;
}
<section class="form" id="contact">
  <div class="form-main">
    <form>
      <button type="button" id="pay">
        <p class="p">Proceed To Pay</p>
      </button>
    </form>
  </div>
</section>

Upvotes: 1

Related Questions