Trouble assigning variable to getElementById in Javascript

Question

I am working on a practice set where I've created a text field and a button, that when clicked, displays in a div.

When I do it writing everything out fully, it works just fine:

<input id ="myInput" type="text">
<button id="stylesChanger">Change the text!</button>
<div id="firstDiv">This is some text</div>

document.getElementById("stylesChanger").onclick = function () {
document.getElementById("firstDiv").innerHTML =
document.getElementById("myInput").value; }

However, when I try to assign the elements to variables to shorten everything up, it doesn't work. Why is this?

<input id ="myInput" type="text">
<button id="stylesChanger">Change the text!</button>
<div id="firstDiv">This is some text</div>

var myInput = document.getElementById("myInput").value; 
var firstButton = document.getElementById("stylesChanger");       
var firstDiv = document.getElementById("firstDiv").innerHTML; 

firstButton.onclick = function {
    firstDiv = myInput;
}

You shortened document.getElementById("firstDiv").innerHTML to firstDiv and document.getElementById("myInput").value to myInput .. those are not the same thing; also, you should escape the value to prevent adding raw HTML into your document or assign to .textContent instead. — Ja͢ck
– Ja͢ck, Commented Apr 13, 2015 at 4:40

jfriend00 · Accepted Answer · 2015-04-13 04:42:49Z

3

You need to get the .value at the exact time of the click and assign to the .innerHTML property at that time. Your code was getting the .value and .innerHTML at the time of the page initialization and then trying to use those to affect the DOM elements which simply does not work. myInput and firstDiv were not object references in your code or live references to what was in those DOM elements - they were simply static string values.

You could use this:

<input id ="myInput" type="text">
<button id="stylesChanger">Change the text!</button>
<div id="firstDiv">This is some text</div>

var myInput = document.getElementById("myInput"); 
var firstButton = document.getElementById("stylesChanger");       
var firstDiv = document.getElementById("firstDiv"); 

firstButton.onclick = function {
    firstDiv.innerHTML = myInput.value;
}

In general, it is better to NOT cache DOM objects like this code is doing because it just creates an issue for a memory leak (if you ever use dynamic elements) and is simply not needed. Your original version would be my recommendation here.

As a point of further explanation, this is what was happening in your code (read the comments above each line:

// get the value in the myInput <input> tag at time of page initialization 
// and store it in myInput Javascript variable
var myInput = document.getElementById("myInput").value; 

// get the stylesChanger DOM element and store it in the firstButton variable
var firstButton = document.getElementById("stylesChanger");       

// get the current string value of the innerHTML in the firstDiv
// and store it in the firstDiv variable
var firstDiv = document.getElementById("firstDiv").innerHTML; 

firstButton.onclick = function {
    // take the static string in the myInput variable and assign it to 
    // the firstDiv variable (does not affect any DOM elements)
    firstDiv = myInput;
}

edited Apr 13, 2015 at 4:42

answered Apr 13, 2015 at 4:36

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jfriend00 Over a year ago

Added line by line explanation of what your code was doing.

mellamojoe Over a year ago

THANK YOU. This was exactly what I was looking for. I'm still very new at this – would you mind elaborating on this a little more? "In general, it is better to NOT cache DOM objects like this code is doing because it just creates an issue for a memory leak (if you ever use dynamic elements) and is simply not needed

jfriend00 Over a year ago

@mellamojoe - Storing a DOM element in a global variable creates a permanent reference to that DOM element. If you changed the HTML in your page such that that DOM element was no longer present in the page, the browser's garbage collector could not free that DOM element because you're still holding a reference to it in your global variable. That's just not a recommended design pattern. Plus using globals when globals are not required is also not a recommended design pattern because global variables can easily create conflicts with other code.

Robby Cornelissen · Accepted Answer · 2015-04-13 04:37:27Z

0

Because, in your code, myInput and firstDiv are string values instead of object references.

Provided that the referenced elements are loaded when your script executes, the correct way to do it would be:

var myInput = document.getElementById("myInput"); 
var firstButton = document.getElementById("stylesChanger");       
var firstDiv = document.getElementById("firstDiv"); 

firstButton.onclick = function {
    firstDiv.innerHTML = myInput.value;
}

answered Apr 13, 2015 at 4:37

Robby Cornelissen

98.6k23 gold badges154 silver badges180 bronze badges

Collectives™ on Stack Overflow

Trouble assigning variable to getElementById in Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related