Ошибка присвоения переменной getElementById в Javascript

Question

Я работаю над набором практики, где я создал текстовое поле и кнопку, которая при нажатии отображается в div.

Когда я это пишу все из полностью, она работает просто отлично:

<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; } 

Однако, когда я пытаюсь присвоить элементы переменных, чтобы сократить все вверх, он не работает. Почему это?

<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; 
} 

Answer 1

Вы должны получить .value в точное время клика и назначить .innerHTML собственности в то время. Ваш код получал .value и .innerHTML во время инициализации страницы, а затем пытался использовать те, которые влияют на элементы DOM, которые просто не работают. myInput и firstDiv не были ссылками на объекты в вашем коде или живыми ссылками на то, что было в этих элементах DOM - это были просто статические значения строк.

Вы могли бы использовать это:

<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; 
} 

В общем, лучше не кэшировать объекты DOM, как этот код делает, потому что он просто создает проблему для утечки памяти (если вы когда-либо использовать динамические элементы) и просто не нужен. Ваша первоначальная версия была бы моей рекомендацией здесь.

---

В качестве отправной точки дальнейшего объяснения, это то, что происходит в вашем коде (читать комментарии выше каждой строки:

// 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; 
} 

Answer 2

Потому что, в вашем коде, myInput и firstDiv строковые значения вместо . из ссылок на объекты

при условии, что загружены ссылочные элементы, когда ваш скрипт выполняет, правильный способ сделать это будет:

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

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