CSS styling using Javascript [duplicate]

Question

Can someone explain why this

x = document.getElementById('bob').style.display;
x = 'hidden';

doesn't work

but

x = document.getElementById('bob');
x.style.display = 'hidden';

works?

Answer 1

So the reason behind this is that in the first example x will return a string value of the display, and changing that will only change the string in you JS code. Whereas in the second example x = to a refrence to and HTML object in the DOM. Changing this variables properties will make a change in the DOM, because it is an HTML element, and not a string.