Cannot use variables to change css property

Question

I am trying to change the background-color of an element by clicking on a button. In 2 implementations of javascript, I am storing slightly different values in the same variable, and using the variables to change the background-color. I expect both implementations to work, but only one works. Here are the details.

In HTML, I have a <div id="foo">Lorem</div> element and a <button id="button">Click</button> element.

I have 2 different codes for JavaScript. The first one is:

var button = document.getElementById("button");
var x = document.getElementById("foo").style;

button.addEventListener("click",function(){
    x.backgroundColor="red";
});

The second one is:

var button = document.getElementById("button");
var x = document.getElementById("foo").style.backgroundColor;

button.addEventListener("click",function(){
    x="red";
});

The first one works, but the second one does not. The only difference between the two code snippets is in the first one, the variable x did not include backgroundColor and the background color of x was changed using x.backgroundColor="red";. In the second one, the variable x did include backgroundColor and the color was changed(tried to change) using x="red";.

Why does the first way work, but the second way does not?

Nick · Accepted Answer · 2019-11-25 01:19:29Z

2

In the first example, you are pointing x at the style object that exists for the foo component. When you assign a string to x.backgroundColor, you are effectively assigning a string to document.getElementById("foo").style.backgroundColor since x and style point to the same object in memory.

In the second example, you are simply assigning the style.backgroundColor string to x. You then assign a new string to x.

answered Nov 25, 2019 at 1:19

Nick

16.7k3 gold badges21 silver badges38 bronze badges

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

Comments

Scott Marcus · Accepted Answer · 2019-11-25 01:30:50Z

2

All that second attempt does is reassign x away from the current backgroundColor property value to the value of red. It's no different than this:

var x = 10;
x = 20;
console.log(x); // 20

In other words, x is not a reference to the backgroundColor property, it's a reference to the value stored in that property, so let's say the original value of the property was "Yellow", then x would be storing the string Yellow, it's not a reference to where that value came from - - only the value itself. So, when you change it, you aren't doing anything to the backgroundColor property, you are just changing the value of x from "Yellow" to "Red".

You can store the value you'd like to assign to backgroundColor as shown below:

// x doesn't store a reference to the object property. It stores 
// the VALUE of the property at this moment in time.
var x = document.getElementById("foo").style.backgroundColor;

var color = "green";

document.getElementById("button").addEventListener("click", function(){

  console.log("Original color of element: " + x);
   
  x = "red";  // All this does is make x point away from it's previous value
  
  console.log("New value of 'x': " + x);
    
  // You need a statement that assigns a new value to the property
  document.getElementById("foo").style.backgroundColor = color;
  
  console.log("New color of element: " + document.getElementById("foo").style.backgroundColor);
});

<div id="foo" style="background-color:orange;">Lorem</div>
<button id="button">Click</button>

edited Nov 25, 2019 at 1:30

answered Nov 25, 2019 at 1:19

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

1 Comment

Scott Marcus Over a year ago

@LettuceBerg Please don't ever edit someone's code that they are showing just because you would write it differently. There's no reason to bring const into the discussion. The OP isn't using it and it doesn't change the behavior of the code here at all. Use your edit privilege wisely. If you believe the code should be changed, just add a comment.

Sheng Zhuang · Accepted Answer · 2019-11-25 01:29:51Z

1

var x = document.getElementById("foo").style;

in this example, x is a style object, like:

{
  padding: 0;
  backgroundColor: blue; 
}

while in the second example, x is actually a string, and in the callback function, x only is assigned with new string.

you can console.log(x) to see the differences of these two "x"s.

answered Nov 25, 2019 at 1:29

Sheng Zhuang

6975 silver badges10 bronze badges

Collectives™ on Stack Overflow

Cannot use variables to change css property

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related