Background color won't change javascript

Question

I'm working on a little project And my background color won't change. https://codepen.io/JorisMertz/pen/gjmZOa

This is my Codepen, If you could help me out that would be really appreciated.

Or here is my code:

 var container = document.getElementById("container"); function togl() { if (container.style.background == "#232323") { container.style.background = "#fafafa"; } else { container.style.background = "#232323"; } } 

 * { font-family: roboto; } #container { color: #fafafa; background: #232323; padding: 20px; max-width: 60%; border-radius: 20px; top: 50%; left: 50%; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); position: absolute; transform: translate(-50%, -50%); } body, html { padding: 0; margin: 0; width: 100%; height: 100%; background: #232323; } #toggle { appearance: none; border-style: none; padding: 7px 25px 7px 25px; position: relative; left: 50%; transform: translate(-50%); outline: none; cursor: pointer; } 

 <div id="container"> <h1>A cool heading</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus interdum dapibus. Morbi est velit, aliquam ac eros in, aliquet semper tortor. Proin hendrerit ultricies dignissim. Proin suscipit sapien ac eleifend dignissim. Vestibulum sit amet rutrum mauris. Donec tincidunt sem at sapien auctor, quis rutrum augue luctus. Vivamus elementum non lacus non blandit.</p> <button id="toggle" onclick="togl()">Toggle</button> </div> 

Answer 1

The most recommended way is to toggle a class, and use addEventListener instead of inline script

It's much simpler to maintain, and you keep the styles in one place, script in one and markup in one.

Stack snippet

 var container = document.getElementById("container"); var button = document.getElementById("toggle"); button.addEventListener('click', function(){ container.classList.toggle('toggled'); }) 

 * { font-family: roboto; } #container { color: #fafafa; background: #232323; padding: 20px; max-width: 60%; border-radius: 20px; top: 50%; left: 50%; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); position: absolute; transform: translate(-50%, -50%); } #container.toggled { background: #fafafa; color: #232323; } body, html { padding: 0; margin: 0; width: 100%; height: 100%; background: #232323; } #toggle { appearance: none; border-style: none; padding: 7px 25px 7px 25px; position: relative; left: 50%; transform: translate(-50%); outline: none; cursor: pointer; } 

 <div id="container"> <h1>A cool heading</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus interdum dapibus. Morbi est velit, aliquam ac eros in, aliquet semper tortor.</p> <button id="toggle">Toggle</button> </div> 

Answer 2

Here is a linked to a fixed codepen with the correct code, along with some logging statements to show you the value.

In short, you need to get the value via getComputedStyle :

var container = document.getElementById("container");

function togl() {
  console.log(container.style.backgroundColor); // empty string
  var bcolor = window.getComputedStyle(container).backgroundColor;
  console.log(bcolor); // rgb(35, 35, 35)
  if (bcolor == "rgb(35, 35, 35)"){
    container.style.backgroundColor = "#fafafa";
  } else {
    container.style.backgroundColor = "#232323";
  }
}

Note that rgb(35, 35, 35) == #232323 , ie they are different ways of specifying the same color.

Answer 3

Two things. The first is, the element.style.background is checking the style property of the element (which is separate from the value supplied by the css. An assignment to said property is needed before it will have a value. You can see this in how the first time the function is run the value is empty.

The second issue is that the values returned are always going to be returned in rgb, not hex. Reversing the if statement to check for the first toggled state the code will work since the first check will be empty property value and thus not equal to the toggle color.

 var container = document.getElementById("container"); function togl() { console.log(container.style.background); if (container.style.background != "rgb(250, 250, 250)") { container.style.background = "#fafafa"; } else { container.style.background = "#232323"; } } 

 * { font-family: roboto; } #container { color: #fafafa; background: #232323; padding: 20px; max-width: 60%; border-radius: 20px; top: 50%; left: 50%; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); position: absolute; transform: translate(-50%, -50%); } body, html { padding: 0; margin: 0; width: 100%; height: 100%; background: #232323; } #toggle { appearance: none; border-style: none; padding: 7px 25px 7px 25px; position: relative; left: 50%; transform: translate(-50%); outline: none; cursor: pointer; } 

 <div id="container"> <h1>A cool heading</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus interdum dapibus. Morbi est velit, aliquam ac eros in, aliquet semper tortor. Proin hendrerit ultricies dignissim. Proin suscipit sapien ac eleifend dignissim. Vestibulum sit amet rutrum mauris. Donec tincidunt sem at sapien auctor, quis rutrum augue luctus. Vivamus elementum non lacus non blandit.</p> <button id="toggle" onclick="togl()">Toggle</button> </div> 

Alternatively, you could use the getComputedStyle method to determine the style of the element (which again, is different from its property value).

 var container = document.getElementById("container"); function togl() { var curColor = window.getComputedStyle(container).backgroundColor;//always will report the value, even on the first execution console.log(curColor) if (curColor == "rgb(35, 35, 35)") { container.style.background = "#fafafa"; } else { container.style.background = "#232323"; } } 

 * { font-family: roboto; } #container { color: #fafafa; background: #232323; padding: 20px; max-width: 60%; border-radius: 20px; top: 50%; left: 50%; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); position: absolute; transform: translate(-50%, -50%); } body, html { padding: 0; margin: 0; width: 100%; height: 100%; background: #232323; } #toggle { appearance: none; border-style: none; padding: 7px 25px 7px 25px; position: relative; left: 50%; transform: translate(-50%); outline: none; cursor: pointer; } 

 <div id="container"> <h1>A cool heading</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus interdum dapibus. Morbi est velit, aliquam ac eros in, aliquet semper tortor. Proin hendrerit ultricies dignissim. Proin suscipit sapien ac eleifend dignissim. Vestibulum sit amet rutrum mauris. Donec tincidunt sem at sapien auctor, quis rutrum augue luctus. Vivamus elementum non lacus non blandit.</p> <button id="toggle" onclick="togl()">Toggle</button> </div> 

Finally, my preferred method, you could track the state in a separate flag. The benefit of this is that you don't need to worry about any browsers reporting the color value differently from one another (eg if one browser doesn't use space characters in their rgb value, the previous code would break).

 var container = document.getElementById("container"); var toggled = false; function togl() { if (!toggled) { container.style.background = "#fafafa"; } else { container.style.background = "#232323"; } toggled = !toggled; } 

 * { font-family: roboto; } #container { color: #fafafa; background: #232323; padding: 20px; max-width: 60%; border-radius: 20px; top: 50%; left: 50%; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); position: absolute; transform: translate(-50%, -50%); } body, html { padding: 0; margin: 0; width: 100%; height: 100%; background: #232323; } #toggle { appearance: none; border-style: none; padding: 7px 25px 7px 25px; position: relative; left: 50%; transform: translate(-50%); outline: none; cursor: pointer; } 

 <div id="container"> <h1>A cool heading</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus interdum dapibus. Morbi est velit, aliquam ac eros in, aliquet semper tortor. Proin hendrerit ultricies dignissim. Proin suscipit sapien ac eleifend dignissim. Vestibulum sit amet rutrum mauris. Donec tincidunt sem at sapien auctor, quis rutrum augue luctus. Vivamus elementum non lacus non blandit.</p> <button id="toggle" onclick="togl()">Toggle</button> </div> 

Answer 4

Problem is solved now! It was checking the style property at first, but i defined all my css in my seperate file. Thanks for all the help!

Answer 5

The background color is empty on default, not #232323 because .style.background is only looking on the attributes of #container and not the css styles.

 var container = document.getElementById("container"); function togl() { if (container.style.background == "") { container.style.background = "#fafafa"; } else { container.style.background = ""; } } 

 * { font-family: roboto; } #container { color: #fafafa; background: #232323; padding: 20px; max-width: 60%; border-radius: 20px; top: 50%; left: 50%; box-shadow: 0px 0px 50px 0px rgba(0, 0, 0, 0.2); position: absolute; transform: translate(-50%, -50%); } body, html { padding: 0; margin: 0; width: 100%; height: 100%; background: #232323; } #toggle { appearance: none; border-style: none; padding: 7px 25px 7px 25px; position: relative; left: 50%; transform: translate(-50%); outline: none; cursor: pointer; } 

 <div id="container"> <h1>A cool heading</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla faucibus interdum dapibus. Morbi est velit, aliquam ac eros in, aliquet semper tortor. Proin hendrerit ultricies dignissim. Proin suscipit sapien ac eleifend dignissim. Vestibulum sit amet rutrum mauris. Donec tincidunt sem at sapien auctor, quis rutrum augue luctus. Vivamus elementum non lacus non blandit.</p> <button id="toggle" onclick="togl()">Toggle</button> </div>