javascript - 在 Javascript 中将变量分配给 getElementById 时遇到问题

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