Why does innerHTML work in this one instance, but not in this other one?-CodePudding

So I'm learning about asynchronous programming through callbacks and wrote this code that calculates the next number in a Fibonacci sequence, when I then had trouble setting the value of an HTML element with innerHTML. The text simply would not show up on the screen even though I thought I did everything right. This is the code here that doesn't work:

window.onload = function() {

  const print = (fibSeq) => {
    let text = document.getElementById('text').innerHTML
    text = fibSeq
  }

  const calcFib = (callback) => {
    let seq = [0, 1]
    seq.push(seq[seq.length - 1]   seq[seq.length - 2])
    callback(seq)
  }
  calcFib(print)
}

I was confused, but then I started tweaking it and found if I just moved innerHTML down one line, the code worked. The code below shows the change, but I don't understand why the code above doesn't work when this one does.

The 'text' variable is set to the element Id and the innerHTML in both examples, yet it only works in one of them. Does anyone understand why? I don't want to move past this without understanding how exactly it was fixed.

window.onload = function() {

  const print = (fibSeq) => {
    let text = document.getElementById('text')
    text.innerHTML = fibSeq
  }

  const calcFib = (callback) => {
    let seq = [0, 1]
    seq.push(seq[seq.length - 1]   seq[seq.length - 2])
    callback(seq)
  }
  calcFib(print)
}

CodePudding user response：

document.getElementById('text') is an object which passes by reference, so text is the object in the second example.

document.getElementById('text').innerHTML is a string which passes by value, so text is a copy of the data in the first example.

CodePudding user response：

Let's imagine we have some html that looks like this:

<div id="text">hello world</div>

now, let's look at your two pieces of code

// the value of our variable 'text' is set to 'hello world'
let text = document.getElementById('text').innerHTML

// now the value of our variable 'text' is changed to the value of 'fibSeq'
text = fibSeq

In the above code block, you are never setting the value of innerHTML, just reading it to get the initial value of text. Now, your second, working code block:

// the value of our variable 'text' is set to our div with an id of 'text' (our dom node)
let text = document.getElementById('text')

// now we update the innerHTML of our dom node to the value of 'fibSeq'
text.innerHTML = fibSeq

Hope that clears things up :)

CodePudding user response：

The problem is not about "innerHTML", but rather the difference between a DOM element and the content of the element.

For the code:

let text = document.getElementById('text').innerHTML 
text = fibSeq

It means to assign the content of element 'text' to a variable 'text' (the two 'text' are different things), then the variable 'text' is re-assigned to another value from function parameter 'fibSeq'.

For your second code:

let text = document.getElementById('text')
text.innerHTML = fibSeq

It means to designate a variable 'text' to a DOM element 'text' (the two 'text' are the same thing - an element), then pass the value of the function parameter 'fibSeq' to the element. It also takes another important step - it renders the HTML tags in the string of 'fibSeq'.

Hope it helps.