Javascript 事件侦听器在单击按钮时更改段落文本不起作用？

Question

当我单击按钮时，文本<p>不会改变。

警报消息显示输出和文本变量正确。但内部文本仍然<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

你们非常接近。删除innerHTML来自var output = document.getElementsByClassName("msg")[0].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>&nbsp; &nbsp; function Message(){&nbsp; &nbsp; var text = document.getElementById("msg").value;&nbsp; &nbsp; var output = document.getElementsByClassName("msg")[0];&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; output.innerHTML = text;}</script>

Answer 2

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

Answer 3

您必须将消息直接设置到innerHTMLDOM 节点的属性上。固定示例：function Message() {&nbsp; &nbsp; var text = document.getElementById("msg").value;&nbsp; &nbsp; 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 4

您将变量定义output为 的值，document.getElementsByClassName("msg")[0].innerHTML然后将 的值更改output为 的值text。javascript 中的基元是按值传递的，而不是按引用传递的。改变var output = document.getElementsByClassName("msg")[0].innerHTML;到document.getElementsByClassName("msg")[0].innerHTML = text

Answer 5

如果你说这样的话：var&nbsp;output&nbsp;=&nbsp;document.getElementsByClassName("msg")[0].innerHTML;输出的值只是某种字符串或类似的值。然后，当您更改该值时，您只需更改字符串的值，而不更改元素。你想做的是这样的：var&nbsp;output&nbsp;=&nbsp;document.getElementsByClassName("msg")[0]; output.innerHtml=text;