Toggle button background color when clicked

user_10765455 0
Viewed 1114

I have this function, intended to toggle the background between two predefined colors of a button each time it is clicked:

const showAvailButtonClicked = (targetButton, clickedColor, unClickedColor) => {
  let clickedElement = document.getElementById(targetButton)
  let currColor = clickedElement.style.backgroundColor
  if (currColor == clickedColor) {
    clickedElement.style.backgroundColor = unClickedColor
  } else {
    alert("Current color:" + currColor)
    clickedElement.style.backgroundColor = clickedColor
  }
}

let targetButton = document.getElementById("testbutton")
targetButton.addEventListener("click", () => {
  showAvailButtonClicked("testbutton","#ba0202", "#0f2e0c")
})
#testbutton {
  background-color: #0f2e0c;
}
<button id="testbutton">Toggle</button>

I encounter two issues with this simple code above:

1 - The button starts out with this color unClickedColor = #0f2e0c. However, on the very first click, the alert does not register any color. ie. the alert message shows Current color: only.

2 - On the 2nd and subsequent clicks, the registered color from this line let currColor = clickedElement.style.backgroundColor gives RGB format rgb(r, g, b). How do I force it into hexadecimal format so that I can make the color comparison? Thanks.

css html javascript
3 Answers

Far better off to attach a class to the button on the click and have the styling on that class.

The following snippet has the base background color set for the button and then when its clicked - toggles a"clicked" class - that when applied - provides an alternate background color.

This is simpler to implement because you are not having to determine the existing background color followed by some funky hex comparison and also its much better to separate the html, js and css into their own realms.

let testButton = document.getElementById("testbutton");

testButton.addEventListener("click", () => {
  testButton.classList.toggle('clicked');
})
#testbutton {
  background-color: #0f2e0c;
  color: white
}

#testbutton.clicked {
  background-color: #ba0202;
}
<button id="testbutton">Toggle</button>

user_58675720
  1. You need to use window.getComputedStyle(clickedElement).backgroundColor. The style property only contains styles assigned in a style attribute or set by scripting. You can also use the following instead:
const currColor = window.getComputedStyle ? window.getComputedStyle(clickedElement, null).getPropertyValue("background-color") : clickedElement.style.backgroundColor;
  1. By default browser will give you rgb value. You need to convert that to hex manually. I've used this function for that purpose.
function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}


function rgb2hex(rgb) {
    if (/^#[0-9A-F]{6}$/i.test(rgb)) return rgb;

    rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
    function hex(x) {
        return ("0" + parseInt(x).toString(16)).slice(-2);
    }
    return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
}

const showAvailButtonClicked = (targetButton, clickedColor, unClickedColor) => {
  let clickedElement = document.getElementById(targetButton);

  let currColor = rgb2hex(window.getComputedStyle(clickedElement).backgroundColor);

  alert("Current color:" + currColor);
  
  if (currColor == clickedColor) {
    clickedElement.style.backgroundColor = unClickedColor
  } else {
    clickedElement.style.backgroundColor = clickedColor
  }
}

let targetButton = document.getElementById("testbutton")

targetButton.addEventListener("click", () => {
  showAvailButtonClicked("testbutton","#ba0202", "#0f2e0c")
})
#testbutton {
  background-color: #0f2e0c;
  color: #fff;
}
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <button id="testbutton">Toggle</button>

</body>
</html>

user_51468480

Use getComputedStyle and keep RGB, no reason why you can't use it. Alos use data attribute to store the alternate color for various buttons and then to store the original color.

document.querySelectorAll(".toggle").forEach(function(el) {
  //Don't use arrow function we want acces to "this"
  el.addEventListener("click", function() {
    //grab the computed style
    let style = getComputedStyle(this);
    //Note color will be RGB
    console.log("Current color: " + style.backgroundColor);
    //Store current color
    let tempStyle = style.backgroundColor;
    //swap the color
    this.style.backgroundColor = this.dataset.altcolor;
    //store the previous color
    this.dataset.altcolor = tempStyle;
  });
});
.toggle {
  background-color: #0f2e0c;
}

.toggle.alt {
  background-color: #0000FF;
}
<button class="toggle" data-altcolor="#ba0202">Toggle</button>
<button class="toggle" data-altcolor="#ff0000">Toggle</button>
<button class="toggle alt" data-altcolor="#00ff00">Toggle</button>

user_46650
Related