CODEWITHSUNDEEP
javascriptdom
user2581598
user2581598

Reputation: 385

Add a list item through JavaScript

So, I am trying to print out an array that gets user input text added to it, but what I want to print out is an ordered list of the array. As you can see, (if you run my code) the list item just keeps getting the user input added to it, and no new list items are added with people's names.

Here is the code below:

 <!DOCTYPE html>
 <html>
 <head>
 First name: <input type="text" id="firstname"><br> 

 <script type="text/javascript">
 var x= [];

 function changeText2(){
var firstname = document.getElementById('firstname').value;
document.getElementById('boldStuff2').innerHTML = firstname;
x.push(firstname);
document.getElementById('demo').innerHTML = x;
 }
 </script>

 <p>Your first name is: <b id='boldStuff2'></b> </p> 
 <p> Other people's names: </p>
 
 <ol>
     <li id = "demo"> </li> 
 </ol>

 <input type='button' onclick='changeText2()'   value='Submit'/> 

 </head>
 <body>
 </body>
 </html>

Upvotes: 38

Views: 205852

Answers (5)

Unmitigated
Unmitigated

Reputation: 89139

For a simpler solution, you can just create a <li> (with document.createElement), set its textContent, and append it to the <ol>.

const list = document.querySelector('ol');
list.append(Object.assign(document.createElement('li'), {textContent: firstname}));

Demo:

document.querySelector('button').addEventListener('click', e => {
  const firstname = document.querySelector('#firstname').value;
  const list = document.querySelector('ol');
  list.append(Object.assign(document.createElement('li'), {textContent: firstname}));
});
<label>First name: <input id="firstname"></label> <button>Submit</button>
<ol></ol>

Upvotes: 0

inkpixelspaper
inkpixelspaper

Reputation: 33

The above answer was helpful for me, but it might be useful (or best practice) to add the name on submit, as I wound up doing. Hopefully this will be helpful to someone. CodePen Sample

    <form id="formAddName">
      <fieldset>
        <legend>Add Name </legend>
            <label for="firstName">First Name</label>
            <input type="text" id="firstName" name="firstName" />

        <button>Add</button>
      </fieldset>
    </form>

      <ol id="demo"></ol>

<script>
    var list = document.getElementById('demo');
    var entry = document.getElementById('formAddName');
    entry.onsubmit = function(evt) {
    evt.preventDefault();
    var firstName = document.getElementById('firstName').value;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(firstName));
    list.appendChild(entry);
  }
</script>

Upvotes: 1

Jesse Novotny
Jesse Novotny

Reputation: 730

I was recently presented with this same challenge and stumbled on this thread but found a simpler solution using append...

var firstname = $('#firstname').val();

$('ol').append( '<li>' + firstname + '</li>' );

Store the firstname value and then use append to add that value as an li to the ol. I hope this helps :)

Upvotes: 5

Felix Kling
Felix Kling

Reputation: 816232

If you want to create a li element for each input/name, then you have to create it, with document.createElement [MDN].

Give the list the ID:

<ol id="demo"></ol>

and get a reference to it:

var list = document.getElementById('demo');

In your event handler, create a new list element with the input value as content and append to the list with Node.appendChild [MDN]:

var firstname = document.getElementById('firstname').value;
var entry = document.createElement('li');
entry.appendChild(document.createTextNode(firstname));
list.appendChild(entry);

DEMO

Upvotes: 86

Josh
Josh

Reputation: 2895

Try something like this:

var node=document.createElement("LI");
var textnode=document.createTextNode(firstname);
node.appendChild(textnode);
document.getElementById("demo").appendChild(node);

Fiddle: http://jsfiddle.net/FlameTrap/3jDZd/

Upvotes: 6

Related Questions