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

无法在Javascript中将变量分配给getElementById

2 个答案: