JavaScript to toggle button colour

Question

I'm trying to set up a page with several buttons, all of which toggle from red to green when a task is completed. However, I want them to be able to toggle back if a mistake is made. So far, I have the following function:

  <button id="button">button</button>
  <script>
  function changeColor(button) {
      
        var thisButton = document.getElementById(button)

        if (thisButton.style.background == '#0f0') {
          thisButton.style.background='#0f0';
        } else {
          thisButton.style.background='#f00';
        }

      }

    </script>

If I use 'red' or 'green' as the colours, this works, but if I use hex as above, or rgb (255,0,0), the if always returns 'false'. Any ideas what I'm doing wrong?

Possible duplicate of [How to compare a backgroundColor in Javascript?](https://stackoverflow.com/questions/9421208/how-to-compare-a-backgroundcolor-in-javascript) — Maor Refaeli, Oct 31 '18 at 12:15

score 2 · Answer 1 · answered Oct 31 '18 at 12:15

2

You are comparing background color to short-version of hex. Compare it to full 6-digits hex:

if (thisButton.style.background.toLowerCase() == '#00ff00')

But consider using some classes for that. Switching classes are much better way.

answered Oct 31 '18 at 12:15

Justinas

41,402
5
66
96

I agree, two class such as `btn-pending` and `btn-completed` would be better. it will also make the code cleaner if you you want to change more than just the color of the button. Then all you have to do is toggle the classes. – Stefan William-Worrall Oct 31 '18 at 12:17

score 0 · Answer 2 · answered Oct 31 '18 at 12:14

0

You are not using the correct hex codes.

Red is #FF0000 and green is #008000

answered Oct 31 '18 at 12:14

Stefan William-Worrall

693
8
21

score 0 · Answer 3 · answered Oct 31 '18 at 12:19

It looks like the browser is "autocorrecting" the applied color. In my tests, if I set thisButton.style.background = 'rgb(255,0,0)' and then read the value back out with console.log(thisButton.style.background), it would add a space after each comma, giving me rgb(255, 0, 0). See this Fiddle for a demo.

I suggest adding a data-color attribute, which will be fully under your control.

  function changeColor(button) {
    var thisButton = document.getElementById(button)

    if (thisButton.getAttribute('data-color') === 'red') {
      thisButton.style.background='#0f0';
      thisButton.setAttribute('data-color', 'green');
    } else {
      thisButton.style.background='#f00';
      thisButton.setAttribute('data-color', 'red');
    }

  }

BullshitPingu · Answer 4 · 2018-10-31T12:33:43.287

The background color style property is highly dependent on the browser. Chrome might output something like rgb(0, 255, 0) while Internet Explorer might output #00FF00.

Try to hold the state of the button in your own model.

const myButtonModel = {
    color: "#0F0"
};

function changeColor() {
    const buttonElement = document.getElementById("button");

    myButtonModel.color = myButtonModel.color === "#0F0" ? "#F00" : "#0F0";

    buttonElement.style.background = myButtonModel.color;
}

If you want to have a class instead like (btn-toggled) you can do this as follows:

const buttonElement = document.getElementById("button");
buttonElement.classList.toggle("btn-toggled")

score -2 · Answer 5 · answered Oct 31 '18 at 12:16

-2

It works for me, maybe try to use document.querySelector instead of document.getElementById.

answered Oct 31 '18 at 12:16

Dorian B

108
10

JavaScript to toggle button colour

5 Answers5