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

user_14508482 0
Viewed 798

The <p> text doesn't change when I click the button.

An alert message shows that output and text variables are correct. But still the Inner Text of <p> doesn't change.

See Output Picture

Here's the HTML:

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

This is the JS:

function Message(){
    var text = document.getElementById("msg").value;
    var output = document.getElementsByClassName("msg")[0].innerHTML;
    
    output = text;
}
event-listener dom html javascript
5 Answers

You have to set the message directly onto the innerHTML property of the DOM node. Fixed example:

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>

user_27669080

Your defining a variable output to the value of document.getElementsByClassName("msg")[0].innerHTML then you are changing the value of output to be the value of text.

Primitives in javascript are passed by value, not by references.

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

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

user_51784060

If you say something like:

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

The value of output will just be some kind of string or similar.

Then when you change that you just change the value of the string but not the element.

What you want to do is this:

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

You were super close.

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

and add it here:

output.innerHTML = text;

So it'll look like this.

<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>

user_121291500
Related