0

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

3
  • dont user id="myDIV" for 2 button user another id. eg. id="myDIV2" Commented Sep 21, 2018 at 10:54
  • So how shall I change that in my Javascript and HTML. Could you please help. Commented Sep 21, 2018 at 10:56
  • Answer given by Geo is the smarter solution. Commented Sep 21, 2018 at 11:00

3 Answers 3

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

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

1 Comment

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

Comments

0

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>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.