CODEWITHSUNDEEP
javascripthtmlcss
Caleb Chang
Caleb Chang

Reputation: 43

Cannot use variables to change css property

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?

Upvotes: 3

Views: 799

Answers (3)

Scott Marcus
Scott Marcus

Reputation: 65806

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>

Upvotes: 2

Sheng Zhuang
Sheng Zhuang

Reputation: 697

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.

Upvotes: 1

Nick
Nick

Reputation: 16576

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.

Upvotes: 2

Related Questions