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

您将变量 output 定义为 document.getElementsByClassName("msg")[0].innerHTML 的值，然后您将 output 的值更改为 text 的值。

javascript 中的基元按值传递，而不是按引用传递。

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

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

Answer 2

如果你这样说：

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

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

然后当你改变它时，你只是改变了字符串的值而不是元素。

你要做的是：

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

Answer 3

您必须将消息直接设置到 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 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>

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

Javascript Event Listener to change paragraph text onclick of button doesn't work?

html

javascript

dom

event-listener