-2

Suppose I have the following html: div id="my_div"><span>no no</span></div>. I want to change the text no no with yes yes. I can do it as following: 

document.getElementById("my_div").getElementsByTagName('span')[0].innerHTML = "yes yes"

But if I want to use things as variables like the following: 

var x = document.getElementById("my_div").getElementsByTagName('span')[0].innerHTML;    
    x = "yes yes";

Now the text no no is not changed. Why?

Matt
  • 74,352
  • 26
  • 153
  • 180
user31782
  • 7,087
  • 14
  • 68
  • 143
  • Have you checked your browser console for errors? – NewToJS Apr 25 '16 at 10:59
  • @NewToJS Yes I have checked in the browser console. It gives no errors. – user31782 Apr 26 '16 at 05:36
  • Why can you completely changed your question? You know others can just click `edited` under your post to view the original question... This makes `gurvinder372` answer look wrong when `gurvinder372` post is answering your original question. I have flagged this question. – NewToJS Apr 26 '16 at 09:55
  • @NewToJS I thought the question was not clear because it was downvoted. So I made it clear with an easy example. – user31782 Apr 26 '16 at 10:48
  • You new questions is very different to your original. `innerHTML` for page elements to `object` properties... come on. – NewToJS Apr 26 '16 at 11:00
  • @NewToJS I've actually generalized it. I changed the object `doocument.GetElementById("my_div")` to `obj` object. And the property `innerHTML` to property `len`. Rather than asking for a specific case, now I am asking in general the same thing. – user31782 Apr 26 '16 at 11:22
  • 1
    Please do not edit your question such that it invalidates existing answers. Instead, ask a new question. – Matt Apr 26 '16 at 12:26
  • @Matt Ok I have asked it as a new question http://stackoverflow.com/q/36865168/3429430 but please don't close that as a duplicate of this. – user31782 Apr 26 '16 at 12:37

1 Answers1

5

To change the value, you need to assign a new value to object, while you are assigning a new value to the reference itself.

Try this

var x = document.getElementById("my_div").getElementsByTagName('span')[0];    
x.innerHTML = "yes yes";
gurvinder372
  • 66,980
  • 10
  • 72
  • 94
  • Isn't `x` an object? – user31782 Apr 25 '16 at 11:05
  • It is reference to which (first) you assigned an object reference value, which you then replaced with a new value. – gurvinder372 Apr 25 '16 at 11:07
  • Doesn't `=` act as assignment operator in javascript? – user31782 Apr 25 '16 at 11:08
  • @user31782 yes, am I missing something? – gurvinder372 Apr 25 '16 at 11:11
  • I do not understand your answer. What is _Reference_? I am assigning a text string value to the _variable_ x. First I made `x` equal to the innerHTML of `span` element. Then I changed the value of `x`. Since `x` is changed so `span`'s innerHTML should also change. – user31782 Apr 25 '16 at 11:16
  • when you assign new value `"yes yes"` to `x`, you replaced the older reference value with new one. You are no longer pointing to that DOM object since you have replaced the reference value to it by a new value `"yes yes"` – gurvinder372 Apr 25 '16 at 11:18
  • In javascript variables are passed by reference. Suppose I have `var x=1, y=2, z=3;` then after `y=x` if I set `y=99` then `x` will also be set to `99`. Similarly in my question, `document.getElementById("my_div").getElementsByTagName('span')[0].innerHTML` is passed to `x` by reference. So changing `x` should also change `document.getElementById("my_div").getElementsByTagName('span')[0].innerHTML`. – user31782 Apr 25 '16 at 11:23
  • `Suppos I have var x=1, y=2, z=3; then after y=x if I set y=99 then x will also be set to 99` Wrong!! Try this in your browser console. – gurvinder372 Apr 25 '16 at 11:26
  • Perhaps objects are passed by reference only. But then why does `x.innerHTML = "yes yes"` work? `x` and `document.getElementById("my_div").getElementsByTagName('span')[0]` are different things. – user31782 Apr 25 '16 at 11:29
  • @user31782 Nope, they are pass by value only. Just that modifying the value is different from assigning a new value. – gurvinder372 Apr 25 '16 at 11:30
  • IIRC Object's properties are changed by reference when object is passed as argument to a function. – user31782 Apr 25 '16 at 11:36
  • @user31782 yes, because the value that is passed is a reference value not the actual value itself. – gurvinder372 Apr 25 '16 at 11:38
  • Isn't reference value and actual value one and the same thing? – user31782 Apr 25 '16 at 11:41
  • @user31782 reference value is basically the address-value of the actual value. – gurvinder372 Apr 25 '16 at 11:43
  • Now what is address value? The values at the actual memory location? – user31782 Apr 25 '16 at 11:45
  • @user31782 Nope, it is the memory-location rather than value-at-memory-location. – gurvinder372 Apr 25 '16 at 11:52
  • So you mean the statement `var x = document.getElementById("my_div").getElementsByTagName('span')[0]` assigns the memory location of span element's data to `x` variable? Then if `var r=2, s=3;` then `s=r` assigns `r`'s memory location to `s`? – user31782 Apr 25 '16 at 11:54
  • @user31782 yes, it assigns the reference of RHS to the LHS. – gurvinder372 Apr 25 '16 at 12:00
  • Then why does `s` become `2`? It should take some hexadecimal value which represent `r`'s memory location. – user31782 Apr 25 '16 at 12:04
  • 1
    @gurvinder372 keep an eye out of any down votes, for some reason **user31782** has changed the question making your answer appear to be incorrect. I have flagged the question for that reason. I would expect better from someone with a rep of **343** – NewToJS Apr 26 '16 at 10:00
  • 1
    @NewToJS yes, noticed that.. Thanks for letting me know. – gurvinder372 Apr 26 '16 at 10:02