Change Button's color twice when it's clicked

Question

I'm trying to create a button whose change background color (to green) when it is cliked. But when it is cliked againg the button returns to the original background color (from orange).

var btn1 = document.getElementById("btn-1")

if (btn1.style.backgroundColor = "orange") {
        btn1.addEventListener("click", function () {
        btn1.style.backgroundColor = "green"
    })
} else {btn1.addEventListener("click", function () {
    btn1.style.backgroundColor = "orange"
})
    }

Could you help me? Thx!

I'm trying to create a button whose change background color (to green) when it is cliked. But when it is cliked againg the button returns to the original background color (from orange).

Maybe this is what you're looking for? https://stackoverflow.com/a/22191000/12484067 — bottle1010, Jun 01 '23 at 18:55
You should have a single event handler here, not several with a dependency on CSS styles. — isherwood, Jun 01 '23 at 19:12

score 2 · Answer 1 · answered Jun 01 '23 at 19:02

There are many ways to do this. My preferred way is simply toggle a class on the element.

In CSS set the default color via #btn-1 then have an active color set via #btn-1.active. Then by toggling the class of active, you change the color to green when the element has the class of active, and orange when it doesn't.

var toggleBTN = document.getElementById("btn-1")

toggleBTN.addEventListener("click",() => {
  toggleBTN.classList.toggle("active");
});

#btn-1{
  background:orange;
}

#btn-1.active{
  background:green;
}

<button id="btn-1">Toggle Color</button>

Alexander Nenashev · Answer 2 · 2023-06-01T19:20:15.230

1

Just toggle the color on the click event:

document
  .getElementById("btn-1")
  .addEventListener(
    'click', 
    ({target:{style}}) => style.backgroundColor = style.backgroundColor === 'orange' ? 'green' : 'orange'
  );

<button id="btn-1" style="background-color: orange">Click me</button>

edited Jun 01 '23 at 19:20

answered Jun 01 '23 at 19:05

Alexander Nenashev

8,775
2
6
17

You should always explain your answer. Don't assume the OP or future visitors will understand what you did without one. – j08691 Jun 01 '23 at 19:12

score 0 · Accepted Answer · answered Jun 01 '23 at 20:22

0

let button = document.getElementById("button");
    button.style.backgroundColor = "orange";

button.addEventListener("click", function () {
        if(button.style.backgroundColor == "orange"){
           button.style.backgroundColor = "green";
        } else button.style.backgroundColor = "orange";
})

<button id="button">test</button>

how i understand you: you can set starter color of button to orange;

and then add EventListener to button with this logic:
-if the color of the button is orange - change to green
or if the color is not orange - change to orange

answered Jun 01 '23 at 20:22

bazylevnik0

60
1
7

addEventListener is listener who listen when event will be, not when you are calling it like a regular function – bazylevnik0 Jun 01 '23 at 20:24
Thx bazy! That was very helpful. – lukasfelipecampos Jun 02 '23 at 17:17

Change Button's color twice when it's clicked

3 Answers3