Question

What is the minimum change to the last 3 lines of code that would make it work without adding or removing any lines of code?

<script>
function produceMessage(){
    var msg= 'This should print';
    return msg;
}

</script>

<div id="myDiv"> This should not print!</div>

<script>
    var element=document.getElementById('myDiv').innerHTML;
    var message= produceMessage();
    element=message;</script>

For example this is not what I’m looking for since it combines the last three lines of code into one:

document.getElementById('myDiv').innerHTML= produceMessage();

Answer 1

from

<script>
    var element=document.getElementById('myDiv').innerHTML;
    var message=produceMessage();
    element=message;</script>

to

<script>
    var element=document.getElementById('myDiv');
    var message=produceMessage();
    element.innerHTML=message;</script>

.

---

The reason why your first one doesn’t work is because you are assigning the text from the myDiv element to var element. Strings are primitive, so they are passed by value, meaning that a copy of the text from .innerHTML is copied into var element.

Rather than that, we want a reference to the HTML Element. Any non-primitive types are passed by reference by default in Javascript. To do that, we use

var element=document.getElementById('myDiv');

Now, var element points to the same object as the document.getElementById('myDiv'), rather than a different instance of the string from its innerHTML, meaning that when we modify the element.innerHTML, we also modify the same object as document.getElementById('myDiv').innerHTML, which happens to be the one on the DOM (web page), rather than a new and different copy of the string.