Using javascript: How do I add to text when clicking the submit button

Question

I'm fairly new to javascript and I'm having great trouble making a 'To Do' list in an app I'm developing. At the moment you can type in the text field and click submit which will bring up what you typed along with a checkbox next to it. That's all fine and good, but if I add anything else to do it the previous text and checkbox is overwritten and I can't figure out how add to the list.

Any help would be greatly appreciated!

Html:

Enter What To Do <input id='userInput' size=60>
<button onClick='userSubmit()'>Submit</button>
<BR><P>
<div id='result'></div>

JS:

function userSubmit() {
    var UI=document.getElementById('userInput').value;
    document.getElementById('result').innerHTML='<input type="checkbox">' + UI;
}

There is no error as such, it works fine! I just want to know how to add to what I put, for example. If I type 1, then submit, then 2, then submit. I want it to display like 1, then 2 underneath it — Joe
– Joe, Commented Jan 31, 2014 at 12:04

score 3 · Accepted Answer · 2014-01-31 12:07:30Z

3

Try this:

document.getElementById('result').innerHTML+='<input type="checkbox"> '+UI+'<br>';

edited Jan 31, 2014 at 12:07

answered Jan 31, 2014 at 12:01

user2575725

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

6 Comments

user2575725 Over a year ago

@Praveen; for first time it wont't but later it will append the new entry

user2575725 Over a year ago

@Praveen u missed the "+" operator in ur fiddle code :)

Praveen Over a year ago

My bad, only through this comment I understood OP's question fully. +1 I will revert my comments.

Joe Over a year ago

That works great thanks so much! Now, is there a way to it to display vertically? and Also have a delete icon? or is that calling upon much more JS ?

user2575725 Over a year ago

look at the end of line; der is a "<br>" tag dat will display vertically

|

halkujabra · Accepted Answer · 2014-01-31 12:10:51Z

0

<script type='text/javascript'>
  function userSubmit() {
      var UI=document.getElementById('userInput').value;
      document.getElementById('result').appendChild('<p><input type="checkbox"> '+UI+'</input></p>);
  } 
</script>

edited Jan 31, 2014 at 12:10

answered Jan 31, 2014 at 12:01

halkujabra

2,9524 gold badges28 silver badges38 bronze badges

3 Comments

Joe Over a year ago

That isn't working for me, nothing comes up when I click submit

machineaddict Over a year ago

@user1708762: you forgot to close the bracket

halkujabra Over a year ago

@user3236263 sorry man! i forgot to close one bracket. Try it now.

Collectives™ on Stack Overflow

Using javascript: How do I add to text when clicking the submit button

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related