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>