CODEWITHSUNDEEP
javascripthtmlcss
Frederik
Frederik

Reputation: 5

onclick change background of div

I have a problem with a div changing background but i also need it to change back when the background color has been applied.

Code: JavaScript:

function myFunction() { 
    if (document.getElementById("demo").style.background == "#ff77ee") {
    document.getElementById("demo").style.background = "#000";
} else{
    document.getElementById("demo").style.background = "#ff77ee";
}
}

Code: HTML:

<div id="demo" onclick="javascript:myFunction();"></div>

Code: Style: ( Its in my Index File )

#demo{
    background: #000;
    width: 200px;
    height: 200px;
}

What i would like it to do is that i want to onclick change the background color to pink. then if i click on it again i would like the color to be the original color - Black.

Upvotes: 0

Views: 15231

Answers (6)

user2575725
user2575725

Reputation:

Try this code.

function myFunction() {
  if (document.getElementById("demo").style.background) {//<-- already having bg
    document.getElementById("demo").style.background = "";//<-- remove it
  } else {
    document.getElementById("demo").style.background = "#ff77ee";
  }
}
<div id="demo" onclick="javascript:myFunction();">hi</div>

EDIT

var div = document.getElementById('demo');

var myFunction = function() {
  var clas = div.className.split(' ');
  var i;
  if (-1 === (i = clas.indexOf('bg'))) {
    clas.push('bg');
  } else {
    clas.splice(i, 1);
  }
  div.className = clas.join(" ");
};

myFunction(); //just for testing
.bg {
  background: pink !important;
}
.brd {
  border: 1px solid grey;
}
.pad {
  padding: 5px 7px;
}
.bg2 {
  background: orange;
}
<div id="demo" onclick="myFunction();" class='brd pad bg2'>hi there</div>

Upvotes: 1

Mercurio Cromo
Mercurio Cromo

Reputation: 69

Here your solution. I use a boolean variable and less code.

var bool = true;
function myFunction() { 
	
    (bool) ? document.getElementById("demo").style.background = "#ff77ee" :  document.getElementById("demo").style.background = "black";
    bool = !bool;

}
#demo{
    background: #000;
    width: 200px;
    height: 200px;
}
<div id="demo" onclick="javascript:myFunction();"></div>

Upvotes: 1

Antoine Chwalek
Antoine Chwalek

Reputation: 45

document.getElementById("demo").style.background

This line return an rgb color, like :

"rgb(255, 119, 238)"

So you can use :

function myFunction() { 
    if (document.getElementById("header").style.background == "rgb(255, 119, 238)") {
        document.getElementById("header").style.background = "rgb(0, 0, 0)";
    } else{
        document.getElementById("header").style.background = "rgb(255, 119, 238)";
    }
}

Upvotes: 1

Manwal
Manwal

Reputation: 23836

Try this code:

function myFunction() { 
    var e = document.getElementById("demo");
    var c = window.getComputedStyle(e).backgroundColor;
    if (c === "rgb(0, 0, 0)") {
    document.getElementById("demo").style.background = "#ff77ee";
} else{
    document.getElementById("demo").style.background = "#000";
}
}

DEMO

Upvotes: 1

Abhitalks
Abhitalks

Reputation: 28437

  1. It is backgroundColor in Javascript
  2. It is background-color in CSS
  3. You need to get computed style for applied styles

Snippet:

var elem = document.getElementById("demo");
var c = window.getComputedStyle(elem).backgroundColor;
alert(c);
#demo{
    background-color: #f00;
    width: 200px;
    height: 200px;
}
<div id="demo" ></div>

Upvotes: 0

Vikas Gautam
Vikas Gautam

Reputation: 978

$(document).ready(function(){


$("#demo").click(function(){

   $("#demo").css('background','red');   

});

});



<div id="demo"> test </div>

You can do it simply by jquery need to add jquery file latest 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Upvotes: 0

Related Questions