Javascript：切换按钮无法正常工作

Question

I am roughly new to Vue and Javascript. I have two buttons that should change background colours when clicked. I have added some Javascript code to make them toggle but the issue is that when the Free button is selected the background changes, but when the Paid button is selected it won't change.

If someone could help it would be much appreciated.

function changeType(type) {
  var element = document.getElementById("myDIV");
  element.classList.toggle("active");
}

Below is the Codepen for what I am trying to do.

https://codepen.io/Aadil_Hafesji/pen/bxZWLg

Many thanks!!!

Answer 1

Edit: Changed function changeType to toggle between two buttons. Also added class button to buttons.

You should pass event parameter to the function and toggle class of event.target.

<button class="buttonCloserGreen button" onclick="changeType(event)">
   Free
</button>

<button class="buttonCloserBlue button" onclick="changeType(event)">
   Paid
</button>

Then access target element in changeType:

 function changeType(e) {
    let btns = document.getElementsByClassName('button')
    for(let i = 0; i < btns.length; i++) {
         btns[i].classList.remove("active")
    }
    e.target.classList.toggle("active");
 }

Demo

Answer 2

You can do like below :

<button class="buttonCloserGreen" onclick="changeType(0)" id="myDIV0">
Free
</button>

<button class="buttonCloserBlue" onclick="changeType(1)" id="myDIV1">
Paid
</button>

In jquery :

 function changeType(type) {
      var element = document.getElementById("myDIV"+type);
      element.classList.toggle("active");
    }

Answer 3

I've passed the complete element, so you have not to use the ID/Class.

 function changeType(element) { element.classList.toggle("active"); } 

 .buttonCloserGreen{ height: 45px; min-width: 200px; margin-bottom: 10px; border: 2px solid #53DD6C; border-radius: 8px; background-color: #ffffff; box-shadow: 4px 4px 20px 0 rgba(35, 31, 32, .05); transition: opacity 200ms ease; transition: transform 200ms cubic-bezier(.175, .885, .32, 1.275), opacity 200ms ease; font-family: Poppins; color: #53DD6C; font-size: 14px; line-height: 40px; font-weight: 700; text-align: center; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; outline: none; } .buttonCloserBlue{ height: 45px; min-width: 200px; margin-bottom: 10px; border: 2px solid #0491F2; border-radius: 8px; background-color: #ffffff; box-shadow: 4px 4px 20px 0 rgba(35, 31, 32, .05); transition: opacity 200ms ease; transition: transform 200ms cubic-bezier(.175, .885, .32, 1.275), opacity 200ms ease; font-family: Poppins; color: #0491F2; font-size: 14px; line-height: 40px; font-weight: 700; text-align: center; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; outline: none; } .active{ background-color: black; } 

 <button class="buttonCloserGreen" onclick="changeType(this)" id="myDIV"> Free </button> <button class="buttonCloserBlue" onclick="changeType(this)" id="myDIV"> Paid </button>