Help with outputting text input into div multiple times (JavaScript)

1

Hey, can someone help me out with this please? I’m sure there’s a very simple solution but I just can’t figure it out. Here’s my code:

function appendMessage(){
    var inputValue = document.getElementById("text-box").value;
    document.getElementById("chat-output").innerHTML += inputValue;
}

var button = document.getElementById("submit-button");

button.onclick = appendMessage;

It’s supposed to render whatever is entered in the input text box to a div when the submit button is clicked. It works but only once. When I try to do it the second time, nothing happens. Any help/input would be appreciated. If additional info is needed, please let me know as I’m brand new to this site haha.

2

We need to see more of the code. How does the event listener code look? Can you post the full app on something like Codepen?

3

hey thanks for responding. i forgot to add the two lines where I’m actually calling the function but if you still need the full code, i could upload it to codepen

4

It would help if you can put it on Codepen. I don’t see anything that should stop it from working.

I’m guessing it is something like this?
https://jsfiddle.net/546p3jby/

5

yep. here’s the link to my code on jsfiddle:

https://jsfiddle.net/6coah4b5/

6

It is because you are adding to the innerHTML and the inputs are inside that innerHTML. So you lose the event listener after the first button click.

You can see this by right-clicking the button and going to the Event Listeners tab in Chrome. You will see it has a click event. Now click the button and look again.

Add an element inside the container to hold the text output.

<div class="chat-output">
  <div class="message-box">
    <input id="text-box" placeholder="Say something nice..." type="text">
    <input id="submit-button" type="submit" value="Submit">
  </div>
  <p id="chat-output"></p>
</div>
7

ohh ok that makes sense. thanks a lot :slight_smile: