javascript - I can't get my todo list to work right -

for reason can't todo list work. first, have global variable named "list" stores: document.getelementbyid('glist'); "glist" id of ordered list element have. then, have textarea id named "goal" , function called addgoal(). see below, first thing function value of textarea id named "goal" , stores variable named "goal". variable created called "entry" stores created li element var entry = document.createelement('li'); variable "entry" given attributes using entry.setattribute. it's given class , class name "mylist". happens code below is, type in text textarea, text added list , fine until try add item list. once add item, replaces first item , adds additional li elements containing same replacing text. appreciate help.

this last part of function adds text typed in textarea ordered list , li element class "mylist".

entry.appendchild(document.createtextnode(goal)); list.appendchild(entry); 

this attempt @ getting li element class "mylist" , making it's innerhtml p element class add image want plus div class name "goaltxt" wrapping variable goal contains text textarea element , reason i'm wrapping goal variable div class can make sure in position css.

document.getelementsbyclassname('mylist')[0].innerhtml = "<p class='bulletp'></p>" + "   <div class='goaltxt'>" + goal + "</div>"; 

here's full code:

<style> .bulletp {     position:relative;     top:-2px;     left:5px;     height: 30px;     width: 20px;     background-image:url('images/point_03.png'); } </style> <ol id="glist"></ol> <textarea id="goal"></textarea>  <script> var list = document.getelementbyid('glist');  function addgoal() {     var goal = document.getelementbyid('goal').value;     var entry = document.createelement('li');     entry.setattribute("class", "mylist");     entry.appendchild(document.createtextnode(goal));     list.appendchild(entry);     document.getelementsbyclassname('mylist')[0].innerhtml = "<p class='bulletp'></p>" +         "<div class='goaltxt'>" + goal + "</div>"; } </script> <input type='button' onclick='addgoal()' value='submit' /> 

you updating using getelementsbyclassname('mylist')[0].innerhtml. [0] means update first element class='mylist' , hence first li value getting updated.

you don't need line @ all. remove it. here sample fiddle. have commented out entire line.

edit: alternately, if looking achieve below structure li, use fiddle.

expected structure:

<li class="mylist">     <p class="bulletp"></p><div class="goaltxt">abcd</div> </li> 

corresponding code:

function addgoal() {     var goal = document.getelementbyid('goal').value;     var entry = document.createelement('li');     entry.setattribute("class", "mylist");      var bulletp = document.createelement('p'); // add <p> tag     bulletp.setattribute("class", "bulletp");     entry.appendchild(bulletp);      var goaltxt = document.createelement('div'); // add <div> tag     goaltxt.setattribute("class", "goaltxt");     goaltxt.appendchild(document.createtextnode(goal));      entry.appendchild(goaltxt);     list.appendchild(entry);    //console.log(list.innerhtml);  } 

note: recommend not using <p> or <div> tags inside <li> tag.