CODEWITHSUNDEEP
javascriptdom-manipulation
Himanshu
Himanshu

Reputation: 23

Change background color using javaScript (no jQuery please)?

I want that the background color of my id 'fb' changes to black on click of button with id btn 1 and when i click it again it changes back to original color i.e #3b5999? I want javaScript answer and no jquery please.

document.getElementById("btn1").onclick=function(){
        var a= document.getElementById("fb");
        if(a.style.backgroundColor=="#3b5999")
        {
            a.style.backgroundColor="black";
        }
        if(a.style.borderColor!="#3b5999")
        {
            a.style.backgroundColor="#3b5999";
        }
    }
 #fb{
            background-color: #3b5999;
            height: 100px;
            color: white;
        }
        #insta{
            background-color: #e4405f;
            height: 100px;
            color: white;
        }
        #Youtube{
            background-color: #cd201f;
            height: 100px;
            color: white;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    </head>
<body>
    <div id="fb">
        <h3>Facebbok</h3>
    </div>
    <div id="insta">
        <h3>Instagram</h3>
    </div>
    <div id="Youtube">
        <h3>Youtube</h3>
    </div>
    <button id="btn1">Click Me for facebook</button>
    <button id="btn2">Click Me for Youtube</button>
    <button id="btn3">Click me for Instagram</button>

Upvotes: 0

Views: 1095

Answers (3)

FZs
FZs

Reputation: 18619

I recommend using classList.toggle() for this purpose:

document.getElementById("btn1").onclick = function() {
  var a = document.getElementById("fb");
  a.classList.toggle("colored")
}
#fb {
  background-color: #3b5999;
  height: 100px;
  color: white;
}
#fb.colored{
  background-color:black;
}

#insta {
  background-color: #e4405f;
  height: 100px;
  color: white;
}

#Youtube {
  background-color: #cd201f;
  height: 100px;
  color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="fb">
    <h3>Facebbok</h3>
  </div>
  <div id="insta">
    <h3>Instagram</h3>
  </div>
  <div id="Youtube">
    <h3>Youtube</h3>
  </div>
  <button id="btn1">Click Me for facebook</button>
  <button id="btn2">Click Me for Youtube</button>
  <button id="btn3">Click me for Instagram</button>

But if you want to use your approach,

  • You wrote borderColor instead of backgroundColor, and
  • Reading backgroundColor property will result rgb(59, 89, 153) rather than #3b5999 and
  • Reading backgroundColor property can only read inline style definitions:

document.getElementById("btn1").onclick = function() {
  var a = document.getElementById("fb");
  if(a.style.backgroundColor=="rgb(59, 89, 153)")
  {
      a.style.backgroundColor="black";
  }
  else if(a.style.backgroundColor!="rgb(59, 89, 153)")
  {
      a.style.backgroundColor="#3b5999";
  }
}
#fb {
  background-color: #3b5999;
  height: 100px;
  color: white;
}
#insta {
  background-color: #e4405f;
  height: 100px;
  color: white;
}

#Youtube {
  background-color: #cd201f;
  height: 100px;
  color: white;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <div id="fb" style="background-color: #3b5999">
    <h3>Facebbok</h3>
  </div>
  <div id="insta">
    <h3>Instagram</h3>
  </div>
  <div id="Youtube">
    <h3>Youtube</h3>
  </div>
  <button id="btn1">Click Me for facebook</button>
  <button id="btn2">Click Me for Youtube</button>
  <button id="btn3">Click me for Instagram</button>

Upvotes: 3

Hien Nguyen
Hien Nguyen

Reputation: 18975

This is source code for your requirement.

I add some code to convert rgb to hex.

	function getStyle(el,styleProp)
    {
    if (el.currentStyle)
        return el.currentStyle[styleProp];

    return document.defaultView.getComputedStyle(el,null)[styleProp];
   }

	function componentToHex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
    }

	function rgbToHex(r, g, b) {
    return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
    }
	
	document.getElementById("btn1").onclick=function(){
        var a= document.getElementById("fb");
		var color = getStyle(a, "backgroundColor");
		
		var matchColors = /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/;
		var match = matchColors.exec(color);
		
		var colorHex = rgbToHex(parseInt(match[1]), parseInt(match[2]), parseInt(match[3]));
        if(colorHex == "#3b5999")
        {
            a.style.backgroundColor="black";
        }
        if(colorHex!="#3b5999")
        {
           a.style.backgroundColor="#3b5999";
        }
    }
#fb{
            background-color: #3b5999;
            height: 100px;
            color: white;
        }
        #insta{
            background-color: #e4405f;
            height: 100px;
            color: white;
        }
        #Youtube{
            background-color: #cd201f;
            height: 100px;
            color: white;
			}
<div id="fb">
        <h3>Facebbok</h3>
    </div>
    <div id="insta">
        <h3>Instagram</h3>
    </div>
    <div id="Youtube">
        <h3>Youtube</h3>
    </div>
    <button id="btn1">Click Me for facebook</button>
    <button id="btn2">Click Me for Youtube</button>
    <button id="btn3">Click me for Instagram</button>

    </script>
</body>
</html>

Upvotes: 0

Bastian Jakobsen
Bastian Jakobsen

Reputation: 132

The toogle method (other answer) is really the best way to go. However, your code doesnt work because you cant access CSS with the style attribute unless the CSS is inline.

To get the CSS in JS you need to use the computed style.

var compStyles = window.getComputedStyle(element);
compStyles.getPropertyValue('background-color')

beware, it outputs colors in rgb format.

Upvotes: 0

Related Questions