将变量分配给 document.getElementById().Innerhtml 不起作用

Question

请参阅下面的代码：

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

它不起作用。

但是当我删除.innerhtmlat 变量MessageElement并设置 时MessageElement.innerHtml= Message，它起作用了。

为什么会这样？
抱歉，我是学习 JavaScript 的新手。

Answer 1

因为这就是 JavaScript 中变量和值的工作方式。想象变量就像容器一样。和

var MessageElement = document.getElementById("happy").innerHTML

容器MessageElement将包含一个字符串。后来，随着

MessageElement = Message;

您只需在容器中放入一个新值，覆盖容器先前的值/内容。但它对先前值来自的位置没有任何影响。

但是当我在变量 MessageElement 中删除 .innerhtml 并设置 MessageElement.innerHtml= Message 时，它​​可以工作。

现在该变量包含对 DOM 元素的引用和

MessageElement.innerHtml = Message

不会为变量分配新值（不会在容器中放入新值），而是使用变量（容器）的值。