sending user input to div

Question

Hello I am here with a quick question on sending user input to a div section of an html document. I asked this question earlier and it seemed to be too broad so I'm going to try to be more specific this time.

I am attempting to send a user input to the div onclick of the send button but every time the code is simply changing the text rather than printing the next text under it. I'm curious what I'm doing wrong with this. Thanks for reading and here's my code.

<div id="out"</div>
<input type="text" name="textIn" id="txtin">
<input type="button" value="Hit me" onclick="hello()"></input>
<script>
 function hello() {
    document.getElementById("out").innerHTML = 
    document.getElementById('txtin').value + "<br />"
}
</script>

https://jsfiddle.net/su0o83hj/1/

Fix this first: <div id="out"></div> then @Jay Buckman answered correctly — RaphaMex
– RaphaMex, Commented Jun 13, 2017 at 14:44

Jay Buckman · Accepted Answer · 2017-06-13 14:42:43Z

1

If you want to append to the existing text, use += instead of = in the function:

function hello() {
    document.getElementById("out").innerHTML += 
    document.getElementById('txtin').value + "<br />"
}

answered Jun 13, 2017 at 14:42

Jay Buckman

5788 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

thatcomputerguy Over a year ago

Thank you very much i will try to remember this in the future :D

dloeda · Accepted Answer · 2017-06-13 14:43:43Z

0

You have some syntax errors, fix it and it will works

<div id="out"></div>
<input type="text" name="textIn" id="txtin" />
<input type="button" value="Hit me" onclick="hello()" />
<script>
 function hello() {
    document.getElementById("out").innerHTML += 
    document.getElementById('txtin').value + "<br />"
}
</script>

edited Jun 13, 2017 at 14:43

answered Jun 13, 2017 at 14:42

dloeda

1,54815 silver badges24 bronze badges

Comments

Yosvel Quintero · Accepted Answer · 2017-06-13 14:57:08Z

0

You can use Element.insertAdjacentHTML() passing the first parameter beforeend:

var out = document.getElementById('out'),
    txtin = document.getElementById('txtin');
    
function hello() {
  out.insertAdjacentHTML('beforeend', txtin.value + '<br>');
}

<div id="out"></div>
<input type="text" name="textIn" id="txtin">
<input type="button" value="Hit me" onclick="hello()">

edited Jun 13, 2017 at 14:57

answered Jun 13, 2017 at 14:46

Yosvel Quintero

19.1k5 gold badges39 silver badges47 bronze badges

Collectives™ on Stack Overflow

sending user input to div

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related