Javascript: Toggle not working properly for button

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!!!

dont user id="myDIV" for 2 button user another id. eg. id="myDIV2" — Rahul Pawar
– Rahul Pawar, Commented Sep 21, 2018 at 10:54
So how shall I change that in my Javascript and HTML. Could you please help. — Aadil Hafesji
– Aadil Hafesji, Commented Sep 21, 2018 at 10:56

Gio Ghviniashvili · Accepted Answer · 2018-09-21 11:16:47Z

2

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

edited Sep 21, 2018 at 11:16

answered Sep 21, 2018 at 10:58

Gio Ghviniashvili

1204 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bigsee Over a year ago

Nice. Assuming from the titles 'free' and 'paid' that the OP would like to toggle between the two and not have both selected at once. Perhaps you could remove the class "active" from both buttons before toggling "active" on the target element?

Rahul Pawar · Accepted Answer · 2018-09-21 10:59:59Z

0

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");
    }

answered Sep 21, 2018 at 10:59

Rahul Pawar

1,0561 gold badge8 silver badges25 bronze badges

Comments

Philip · Accepted Answer · 2018-09-21 11:00:37Z

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>

Collectives™ on Stack Overflow

Javascript: Toggle not working properly for button

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related