Cannot set backgroundColor when assigned to a variable

Question

Trying to set a background color to the body of the document, I am puzzled as for why the following code does not work (tested in Chrome):

var a = 'blue';
var b = document.getElementById('body').style.backgroundColor;
b = a; // Not working.

while this works fine:

var a = 'blue';
var b = document.getElementById('body').style;
b.backgroundColor = a; // works.

and this works too:

document.getElementById('body').style.backgroundColor = 'blue'; //works

Can someone explain why the first version does not work?

Answer 1

var b = document.getElementById('body').style.backgroundColor;

Acts like a getter and returns the background color of the element with the ID of body. It doesn't hold a pointer to it the way you seem to be thinking. So b would contain a string like purple or whatever color you set.

Then you're doing b = a; which will just overwrite the value of b with a 's value.

Answer 2

This is a classic pointer user error. I've made this mistake many many times.

var a = 'blue';
var b = document.getElementById('body').style.backgroundColor;
b = a; // Not working.

The above code doesn't work because the value of document.getElementById('body').style.backgroundColor is being copied to the identifier b . When you reassign b with the value of a you're not re-assigning the value of document.getElementById('body').style.backgroundColor .

That why thiis code works:

var a = 'blue';
var b = document.getElementById('body').style;
b.backgroundColor = a; // works.

because you're saving the value of style to the identifier b . b a complex type. Now when you reassign b.style you're also re-assigning document.getElementById('body').style because the identifier b holds the same reference as document.getElementById('body').style .

Let me try to break that down:

---

In javascript (and many other languages) when you assign a complex type (ie an object or an array) to an identifier, you're actually assigning a reference to "something" in memory. You can think of the identifier's value being an "address" instead of holding all the values of the complex type, and when you try to pull values out of the identifier using the obj.prop syntax, you're actually telling the program to go to the address and fetch the desired value.

Therefore, if any property in that "something" changes, the references (aka pointers) will also reflect that change:

 const complexType = { a: 'something' } const x = complexType; const y = complexType; console.log(`from x: ${xa}`); console.log(`from y: ${ya}`); complexType.a = 'something else'; // notice how they change console.log(`from x again: ${xa}`); console.log(`from y again: ${ya}`); 

To contrast, simple/primitive types are always copied on assignment . This means that the identifier hold the full value instead of holding an address. That means whenever you assign an identifier to a simple/primitive value, that value will persist even when you change the original value.

 // original value let simpleType = 'something'; let a = simpleType; let b = simpleType; console.log(`from a: ${a}`); console.log(`from b: ${b}`); // re-assign simpleType = 'something else'; // notice how they *don't* change console.log(`from a again: ${a}`); console.log(`from b again: ${b}`); 

So to conclude, document.getElementById('body').style.backgroundColor returns a simple type. This simple type get copied on assignment. That's why you can't do this:

var a = 'blue';
var b = document.getElementById('body').style.backgroundColor;
b = a; // Not working.

Hope that helps!