assigning variable to document.getElementById().Innerhtml not working
Question
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 .innerhtml at variable MessageElement and set the MessageElement.innerHtml= Message , it works.
Why is it so?
Sorry, I am a newbie learning JavaScript.
4 answers
solution1
4 ACCPTED 2014-02-18 08:22:24
Because that's how variables and values work in JavaScript. Imagine variables to be like containers. With
var MessageElement = document.getElementById("happy").innerHTML
the container MessageElement will contain a string . Later on, with
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.
Now the variable contains a reference to the DOM element and
MessageElement.innerHtml = Message
doesn't assign a new value to the variable (doesn't put a new value in the container), it uses the value of the variable (container).
solution2
0 2014-02-18 08:23:34
innerHTML返回一个字符串而不是指向document.getElementById（“happy”）的文本节点的指针。
solution3
0 2014-02-18 08:27:23
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);
};
solution4
0 2014-02-18 08:51:17
@Felix King is correct.
To test how it is actually behaving I myself tried the below snippet on W3Schools.
And I found:
- 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>
Thanks Felix :)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.