javascript 将变量分配给 document.getElementById().Innerhtml 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21847812/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
assigning variable to document.getElementById().Innerhtml not working
提问by user3322381
See the code below:
请参阅下面的代码：
var text=["yuppie", "kkkoseh", "watchdog"];
var messageIndex=0;
function looptext (){
var MessageElement= document.getElementById("happy").innerHTML
var Message=text[messageIndex];
MessageElement=Message;
messageIndex++;
if(messageIndex>=text.length){
messageIndex=0;
}
}
window.onload = function() {
setInterval(looptext, 1000);
};
It doesn't work.
它不起作用。
But when I remove .innerhtmlat variable MessageElementand set the MessageElement.innerHtml= Message, it works.
但是当我删除.innerhtmlat 变量MessageElement并设置 时MessageElement.innerHtml= Message，它起作用了。
Why is it so?
Sorry, I am a newbie learning JavaScript.
为什么会这样？
抱歉，我是学习 JavaScript 的新手。
回答by Felix Kling
Because that's how variables and values work in JavaScript. Imagine variables to be like containers. With
因为这就是 JavaScript 中变量和值的工作方式。想象变量就像容器一样。和
var MessageElement = document.getElementById("happy").innerHTML
the container MessageElementwill contain a string. Later on, with
容器MessageElement将包含一个字符串。后来，随着
MessageElement = Message;
you simply put a new value in the container, overwriting the previous value/content the container had. But it doesn't have any effect on the location where the previous value was coming from.
您只需在容器中放入一个新值，覆盖容器先前的值/内容。但它对先前值来自的位置没有任何影响。
But when I remove .innerhtml at variable MessageElement and set the MessageElement.innerHtml= Message , it works.
但是当我在变量 MessageElement 中删除 .innerhtml 并设置 MessageElement.innerHtml= Message 时，它就可以工作了。
Now the variable contains a reference to the DOM element and
现在该变量包含对 DOM 元素的引用和
MessageElement.innerHtml = Message
doesn't assigna new value to the variable (doesn't put a new value in the container), it usesthe value of the variable (container).
不会为变量分配新值（不会在容器中放入新值），而是使用变量（容器）的值。
回答by Manuel Spigolon
innerHTML return a string not e pointer to the document.getElementById("happy")'s text node.
innerHTML 返回一个字符串，而不是指向 document.getElementById("happy") 的文本节点的指针。
回答by Amin
try this
试试这个
var text=["yuppie", "kkkoseh", "watchdog"];
var messageIndex=0;
function looptext (){
document.getElementById("happy").innerHTML = text[messageIndex];
messageIndex++;
if(messageIndex>=text.length){
messageIndex=0;
}
}
window.onload = function() {
setInterval(looptext, 1000);
};
回答by Atul O Holic
@Felix King is correct.
@Felix King 是正确的。
To test how it is actually behaving I myself tried the below snippet on W3Schools.
And I found:
为了测试它的实际行为，我自己在 W3Schools 上尝试了以下代码段。
我发现：
- var MessageElement = document.getElementById("happy") - assigns the element (in my example - http://www.microsoft.com/)
- alert(m) thus displays - http://www.microsoft.com/
- m.innerHTML = "Atul" - assigns Atul to the element.
However, value of m was still http://www.microsoft.com/as Felix rightly said - 'MessageElement.innerHtml = Message, doesn't assign a new value to the variable'.
<html> <head> <script> function changeLink() { var m = document.getElementById("myAnchor"); //assigns http://www.microsoft.com/ alert(m); // m.innerHTML = "Atul" alert(document.getElementById("myAnchor").innerHTML + " new"); document.getElementById('myAnchor').innerHTML=m; } </script> </head> <body> <a id="myAnchor" href="http://www.microsoft.com">Microsoft</a> <input type="button" onclick="changeLink()" value="Change link"> </body> </html>
- var MessageElement = document.getElementById("happy") - 分配元素（在我的例子中 - http://www.microsoft.com/）
- alert(m) 因此显示 - http://www.microsoft.com/
- m.innerHTML = "Atul" - 将 Atul 分配给元素。
但是，m 的值仍然是http://www.microsoft.com/，正如 Felix 所说的那样-“MessageElement.innerHtml = Message，不会为变量分配新值”。
<html> <head> <script> function changeLink() { var m = document.getElementById("myAnchor"); //assigns http://www.microsoft.com/ alert(m); // m.innerHTML = "Atul" alert(document.getElementById("myAnchor").innerHTML + " new"); document.getElementById('myAnchor').innerHTML=m; } </script> </head> <body> <a id="myAnchor" href="http://www.microsoft.com">Microsoft</a> <input type="button" onclick="changeLink()" value="Change link"> </body> </html>
Thanks Felix :)
谢谢菲利克斯 :)
