Dfyjkt

I am building a simple JavaScript to-do list with DOM methods and am attempting to implement localStorage for the list items. localStorage appears to function properly when items are both added and removed. However, the word undefined is thrown to the screen before the list items are rendered. Any idea why this is happening? Much appreciated!

JS:

var ul = document.getElementById("myUl");

function add() 
 var item = document.getElementById("newItem").value;
 var itemTxt = document.createTextNode(item);
 var li = document.createElement("li");
 var btn = document.createElement("button");
 var btnx = document.createTextNode("x");
 btn.setAttribute("onclick", "remove()");
 btn.appendChild(btnx);
 li.appendChild(itemTxt);
 li.appendChild(btn);
 ul.appendChild(li);


function remove() 
 var task = this.event.currentTarget.parentNode;
 ul.removeChild(task);


ul.innerHTML = localStorage["list"];

setInterval(function()
 localStorage["list"] = ul.innerHTML;
, 1000);

HTML:

 <input id="newItem" />
 <button onclick="add()">add</button>
 <ul id="myUl">New List</ul>

I updated code with comments:

var ul = document.getElementById("myUl");

function add() 
 var item = document.getElementById("newItem").value;
 var itemTxt = document.createTextNode(item);
 var li = document.createElement("li");
 var btn = document.createElement("button");
 var btnx = document.createTextNode("x");
 btn.setAttribute("onclick", "remove()");
 btn.appendChild(btnx);
 li.appendChild(itemTxt);
 li.appendChild(btn);
 ul.appendChild(li);
 localStorage["list"] = ul.innerHTML // updating localstorage


function remove() 
 var task = this.event.currentTarget.parentNode;
 ul.removeChild(task);
 localStorage["list"] = ul.innerHTML // updating localstorage


if (localStorage["list"]) // checking, if there is something in localstorage
 ul.innerHTML = localStorage["list"];

Demo: https://codepen.io/anon/pen/dQpwpz

NB: It is not a best practice to put html into localStorage, but I believe you know it.