-2

I'm trying to assign a value to the document with a variable, but when I use the variable for the second time, it resets what I assigned first. Can someone with a comprehensive explanation bring facts to light (not only answer but help comprehend) ?

 <script>
  var dataOnly = document.body.style.backgroundColor;
  dataOnly = "gray"; //see it assigns a new value, is there another way around?
 </script>
user2887761
  • 95
  • 1
  • 8
  • 1
    Are you trying to set the background Color of the body to gray? – Blundering Philosopher Aug 23 '15 at 21:18
  • Yes, but just as an example code. What I really want to do is assign a data to the document object, with a variable why does that seems impossible. In the sense that this is not the right way to do it in JS (to reuse var) ? – user2887761 Aug 23 '15 at 21:23
  • 1
    Try something setting `dataOnly = "gray";` first, then doing `document.body.style.backgroundColor = dataOnly;`. Your example above is just storing the current background color into a variable `dataOnly` then changing the value of that variable, which doesn't do anything to the background Color. Does that make sense? – Blundering Philosopher Aug 23 '15 at 21:26
  • I perfectly understand that method, which imply that it's impossible to reuse variables. – user2887761 Aug 23 '15 at 21:29
  • Can I do the same thing similarly with object literal (and yet as a var)? – user2887761 Aug 23 '15 at 21:40

2 Answers2

1

I think what you're referring to is values versus references and how assignment and mutation are handled.

I think you may find this an interesting read: Is JavaScript a pass-by-reference or pass-by-value language?

There is a difference between reassigning a variable's value and accessing a reference "through" a variable:

var a = {}
var b = a
b.test = 'test';
console.log(a, b); // these will both be: {'test': 'test'}

var a = 'test1';
var b = a;
b = 'test2';
console.log(a, b); // these will be: 'test1', 'test2'

And in your example, had you done:

var dataOnly = document.body.style;
dataOnly.backgroundColor = 'gray';

I think it would work how you expect.

Community
  • 1
  • 1
ryachza
  • 4,460
  • 18
  • 28
  • This also works and behaves more adequate to what I expect: [code](var a={b:document.body.style,c:function(x){return this.b.backgroundColor=x}}; a.c("purple");) – user2887761 Aug 24 '15 at 13:50
  • 1
    @user2887761 In case it is helpful as it seems you're goal is learning JS, rewriting as something like: `function c(x){ this.backgroundColor = x; } c.bind(document.body.style)('purple');` works as well. – ryachza Aug 24 '15 at 14:12
  • I was just wondering if I could neutralize the variable from firing, in case of a function inside the variable. So I could reuse it in different scenarios like?`function c(x){ this.backgroundColor = x; } /*notice this variable fires with the function*/ var z = c.bind(document.body.style)('black');` – user2887761 Aug 24 '15 at 17:14
  • 1
    @user2887761 If I'm understanding correctly, you could do `var z = c.bind(document.body.style); /* this sets "z" to be "c" with "this" bound to "document.body.style" */ z('black'); z('purple');` – ryachza Aug 24 '15 at 17:18
  • For the sake of my question first intention, I been trying to do this (with a variable):`var d="black"; if (d===new String("black")){document.body.style.backgroundColor="blue"}` although I can't get it to work, why? – user2887761 Aug 24 '15 at 18:44
  • 1
    @user2887761 This may be useful: http://stackoverflow.com/questions/17256182/what-is-the-difference-between-string-literals-and-string-objects-in-javascript . The strict equality (`===`) here will not work since `d` will be a `string` but `new String` will be an `object` (not the same type). `typeof` may also be of interest to you. – ryachza Aug 24 '15 at 19:15
  • Okay, how about refreshing a variable through console.log, or refreshing the variable with new value will not happen in console.log, because JS is static? – user2887761 Aug 24 '15 at 19:45
0

So when you type "color"(the variable) after this code entry in the console.log, it will change the background color accordingly to the color specified after assigning(=) it as a string(" " or ' ') inside the variable. And the background will change color in confirmation if it was done correctly(written as a string and right spelling inside the variable color), if it's a hexadecimal with the "#"(symbol in front) and also followed by six numbers or letters (or both mixed together should work too), just note that the letters accepted as hex are: A,B,C,D,E,F (or alternatively a, b, c, d, e, f). Certify that if the color is not hex, it must have the name among the 140 colors supported by modern browsers, for example:gray,purple,black.

var color;
setInterval(function(){if (color){document.body.style.backgroundColor=color};},100);
user2887761
  • 95
  • 1
  • 8