Changing - css - backgroundColor function (pure javascript) doesn't work

Question

Could anyone tell me why changing colour after performing onclick doesn't work here ?

function butt(color) {
    if(document.getElementById("bt").style.backgroundColor=="green"){
            document.getElementById("bt").style.backgroundColor="purple";
    }
};
document.getElementById("bt").addEventListener("click", function() {
    butt("green")
});

#bt {
    background-color:yellow;
    border-radius:10%;
    padding:10px;
    margin:20px;
}

<div class="row">
    <div id="forbutton">
        <button type="button" id="bt">It's me MrButton !</button>
    </div>
</div>

Also, your click won't do anything as it takes style.backgroundColor from the inline style so it would ignore anything you add to your css file as it is not inline (you need to use something like element.getComputedStyle) - and as Sagar says you have used yellow but compared against green. One final thing would be why are you passing a variable into the function but not using it? — Pete
– Pete, Commented Mar 28, 2017 at 14:51
sorry that should be window.getComputedStyle(element).backgroundColour - but it will return an rgb colour rather than red or blue — Pete
– Pete, Commented Mar 28, 2017 at 14:59
@Pete @ freginold Thanks guys I'm Newbie to programming. I didn't know it treats css including in separate file as inline-style and thanks for .getComputedStyle trick. — Zebra
– Zebra, Commented Mar 28, 2017 at 15:09

zer00ne · Accepted Answer · 2017-03-28 14:55:42Z

1

You are just passing the string "green" through the function. Details commented in Snippet.

SNIPPET

// pass the string through function
function butt(color) {

  // If string is "green"...
  if (color === "green") {

    // Reference #bt and change it's backgroundColor to purple
    document.getElementById("bt").style.backgroundColor = "purple";
  }

};

// Register #bt to click event, when clicked...
document.getElementById("bt").addEventListener("click", function() {

  // Call butt() function passing the string "green"
  butt("green")
});

#bt {
  background-color: yellow;
  border-radius: 10%;
  padding: 10px;
  margin: 20px;
}

<div class="row">
  <div id="forbutton">
    <button id="bt">It's me MrButton !</button>
  </div>

answered Mar 28, 2017 at 14:55

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

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

1 Comment

Organiccat Over a year ago

Secondary point, it's possible the DOM isn't loading as well, so a readyState check wouldn't hurt. Otherwise, it will fail at trying to get the document element (null value otherwise)

Collectives™ on Stack Overflow

Changing - css - backgroundColor function (pure javascript) doesn't work

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related