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>

    function Message(){

    var text = document.getElementById("msg").value;

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

    

    output.innerHTML = text;

}

</script>

Answer 2

function Message(){

    var text = document.getElementById("msg").value;

    document.getElementsByClassName("msg").innerHTML = text;

}

Answer 3

您必须将消息直接设置到innerHTMLDOM 节点的属性上。固定示例：

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 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 output = document.getElementsByClassName("msg")[0].innerHTML;

输出的值只是某种字符串或类似的值。

然后，当您更改该值时，您只需更改字符串的值，而不更改元素。

你想做的是这样的：

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