Change HTML Button style when click not working in Javascript

Question

I want to change a button color when click the button. This is the code that I used.

function abc() {
    var color = document.getElementById("btn").style.background - color;
    if (background - color === "#c1580b")
        document.getElementById("btn").style.cssText = "box-shadow: 0px 0px 0px 3px #173B0B; background-color: #173B0B; color:#459c5c";
    else
        document.getElementById("btn").style.cssText = "box-shadow: 0px 0px 0px 3px #c1580b; background-color: #c1580b; color:#ffb734";
}

.btn {
  background: #c1580b;
  color: #ffb734;
  width: 80px;
  height: 80px;
  line-height: 70px;
  display: block;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  border: 2px solid #000;
  box-shadow: 0px 0px 0px 3px #c1580b;
  font-size: medium;
}

<button id="btn" class="btn" onclick="abc()">Pause</button>

But this is not working.

`background - color` is what? You are subtracting two variables — epascarello, May 03 '18 at 11:31
And subtraction operator cannot return a string only a number. So much wrong in a single parenthesis.... — soupy-norman, May 03 '18 at 11:35

score 3 · Answer 1 · answered May 03 '18 at 11:59

I did not quite understand that part of the background - color, but to check the background in hex, you have to go from hex to rgb.

Can see here more examples of how to pass hex to rgb - https://stackoverflow.com/a/4090628/8098173

Here's an example of what you want.

function abc() {
    var bt = document.getElementById('btn');
    var style = bt.currentStyle || window.getComputedStyle(bt);
    var bcolor = rgb2hex(style.backgroundColor);
    if (bcolor === '#c1580b') {
        bt.style.cssText = "box-shadow: 0px 0px 0px 3px #173B0B; background-color: #173B0B; color:#459c5c";
    } else {
        bt.style.cssText = "box-shadow: 0px 0px 0px 3px #c1580b; background-color: #c1580b; color:#ffb734";
    }
}

// pass rbg to hex
function rgb2hex(rgb) {
    if (  rgb.search("rgb") == -1 ) {
        return rgb;
    } else {
        rgb = rgb.match(/^rgba?\((\d+),\s*(\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]); 
    }
}

.btn {
  background: #c1580b;
  color: #ffb734;
  width: 80px;
  height: 80px;
  line-height: 70px;
  display: block;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  border: 2px solid #000;
  box-shadow: 0px 0px 0px 3px #c1580b;
  font-size: medium;
}

<button id="btn" class="btn" onclick="abc()">Pause</button>

Thank you, this also a working example. Very helpful. – Chathuri Fernando May 03 '18 at 14:18 — Chathuri Fernando, May 03 '18 at 14:18

score 1 · Answer 2 · answered May 03 '18 at 12:11

if always you use this color in HEX format (#c1580b), So:

function abc() {
    var elm = document.getElementById( 'btn' );
    var color = window.getComputedStyle( elm ).backgroundColor;

    if ( color === 'rgb(193, 88, 11)' )
        elm.style.cssText = 'box-shadow: 0 0 0 3px #173B0B; background-color: #173B0B; color: #459c5c'
    else
        elm.style.cssText = 'box-shadow: 0 0 0 3px #c1580b; background-color: #c1580b; color: #ffb734'
}

Brigo · Accepted Answer · 2018-05-03T18:17:22.350

Here you have a working code.

I would suggest you to avoid the inline onclick="abc()" and opt in favor of a fully-separated code using EventListener (that's good for maintainability).

With Window.getComputedStyle() you get the background color in RGBA; you can then convert it to the HEX code with a simple function that you can find everywhere on the Web, here I used one of them. So, the right way to get the background color is window.getComputedStyle(btn, null)["backgroundColor"] while, if you would like to set it, the correct form would be document.getElementById("btn").style.backgroundColor = "#0000".

/**
 * The code inside the function is run only when the DOM is ready.
 * This is the only jQuery function used, all the rest is in vanillaJS.
 */
$(document).ready(function() {

  /**
   * rgb2hex
   * Convert RGB to HEX.
   * Source: https://jsfiddle.net/Mottie/xcqpF/1/light/
   * 
   * @param {string} rgb
   */
  var rgb2hex = function(rgb){
    rgb = rgb.match(/^rgba?[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?/i);
    return (rgb && rgb.length === 4) ? "#" +
        ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
        ("0" + parseInt(rgb[3],10).toString(16)).slice(-2) : '';
  }

  /**
   * EventListener of btn click event
   */
  document.getElementById("btn")
    .addEventListener('click', function() {
      // Save the btn into a var so you can use it later
      var btn = document.getElementById("btn");
      // Notice: getComputedStyle() to get the element background color
      var color = window.getComputedStyle(btn, null)["backgroundColor"];
      // Transform RGBa to HEX
      var hex = rgb2hex(color);
      
      // IF-ELSE with ternary operators
      (hex === "#c1580b")
          ? btn.style.cssText = "box-shadow: 0px 0px 0px 3px #173B0B; background-color: #173B0B; color:#459c5c"
          : btn.style.cssText = "box-shadow: 0px 0px 0px 3px #c1580b; background-color: #c1580b; color:#ffb734";
      
    });
    
});

.btn {
  background: #c1580b;
  color: #ffb734;
  width: 80px;
  height: 80px;
  line-height: 70px;
  display: block;
  border-radius: 50%;
  text-align: center;
  text-decoration: none;
  border: 2px solid #000;
  box-shadow: 0px 0px 0px 3px #c1580b;
  font-size: medium;
  cursor: pointer;
}

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  </head>
  <body>

    <button id="btn" class="btn">Pause</button>

  </body>
</html>

Thank you, this is what I exactly expected. – Chathuri Fernando May 03 '18 at 14:17 — Chathuri Fernando, May 03 '18 at 14:17

score -2 · Answer 4 · answered May 03 '18 at 11:36

-2

Your code contains some logical error. The if condition has no sense : background - color means «substract the value of color to the value of background (which seems to be undefined).

To get the background color of the button, you need the following background = document.getElementById("btn").style.backgroundColor; if (background === "#c1580b")

answered May 03 '18 at 11:36

Asenar

6,732
3
36
49

1

`if (background === "#c1580b")` will be false everytime, cause `style.backgroundColor` returns rgb value not hex. – Durga May 03 '18 at 11:39
1

_[HTMLElement.style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) property is used to get as well as set the **inline** style of an element_. `document.getElementById("btn").style.backgroundColor` will always return an empty string since `background-color` is set via CSS. `window.getComputedStyle(btn, null)["backgroundColor"]` is the right way to get the background color. – Brigo May 04 '18 at 09:21

Change HTML Button style when click not working in Javascript

4 Answers4