CODEWITHSUNDEEP
javascripthtmlcss
Zebra
Zebra

Reputation: 189

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

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>

Upvotes: 2

Views: 1002

Answers (1)

zer00ne
zer00ne

Reputation: 43880

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>

Upvotes: 1

Related Questions