Javascript 事件監聽器更改段落文本 onclick 按鈕不起作用？

Question

當我單擊按鈕時， <p>文本不會改變。

一條警報消息顯示 output 和文本變量是正確的。 但是<p>的內部文本仍然沒有改變。

這是 HTML：

<input type="text" id="msg"><br>
<button onclick="Message()">Submit</button><br>
<h2>Last Message:</h2>
<p class="msg">Message</p>

這是JS：

function Message(){
    var text = document.getElementById("msg").value;
    var output = document.getElementsByClassName("msg")[0].innerHTML;
    
    output = text;
}

Answer 1

您必須將消息直接設置到 DOM 節點的innerHTML屬性上。 固定示例：

 function Message() { var text = document.getElementById("msg").value; document.getElementsByClassName("msg")[0].innerHTML = text; }

 <input type="text" id="msg"><br> <button onclick="Message()">Submit</button><br> <h2>Last Message:</h2> <p class="msg">Message</p>

Answer 2

您將變量output定義為document.getElementsByClassName("msg")[0].innerHTML的值，然后您將output的值更改為text的值。

javascript 中的原語是按值傳遞的，而不是按引用傳遞的。

更改var output = document.getElementsByClassName("msg")[0].innerHTML;

到document.getElementsByClassName("msg")[0].innerHTML = text

Answer 3

如果你說這樣的話：

var output = document.getElementsByClassName("msg")[0].innerHTML;

output 的值將只是某種字符串或類似的。

然后，當您更改它時，您只需更改字符串的值而不是元素的值。

你想要做的是：

var output = document.getElementsByClassName("msg")[0];
output.innerHtml=text;

Answer 4

function Message(){
    var text = document.getElementById("msg").value;
    document.getElementsByClassName("msg").innerHTML = text;
}

Answer 5

你超級親密。

從var output = document.getElementsByClassName("msg")[0].innerHTML;中刪除innerHTML ；

並在此處添加：

output.innerHTML = text;

所以它看起來像這樣。

 <input type="text" id="msg"><br> <button onclick="Message()">Submit</button><br> <h2>Last Message:</h2> <p class="msg">Message</p> <script> function Message(){ var text = document.getElementById("msg").value; var output = document.getElementsByClassName("msg")[0]; output.innerHTML = text; } </script>