title: JavaScript - Creating a function to edit list items
body: <p>I have created a simple To-Do app in HTML5. I have added a button to Add and Delete items.<br>
  However, I cannot figure out how to Edit items. Any idea how to create a function whereby I could edit items on this list?  </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function get_todos() {
    var todos = new Array;
    var todos_str = localStorage.getItem('todo');
    if (todos_str !== null) {
      todos = JSON.parse(todos_str);
    }
    return todos;
  }
  
  function add() {
    var task = document.getElementById('task').value;
    var todos = get_todos();
    todos.push(task);
    localStorage.setItem('todo', JSON.stringify(todos));
    show();
    return false;
  }
  
  function remove() {
    var id = this.getAttribute('id');
    var todos = get_todos();
    todos.splice(id, 1);
    localStorage.setItem('todo', JSON.stringify(todos));
    show();
    return false;
  }
  
  function show() {
    var todos = get_todos();
    var html = '&lt;ul class="list"&gt;';
    for (var i = 0; i &lt; todos.length; i++) {
      html += '&lt;li&gt;' + todos[i] + '&lt;button class="remove" id="' + i + '"&gt;Delete&lt;/button&gt;  &lt;button class="remove" id="' + i + '"&gt;Edit&lt;/button&gt;&lt;/li&gt;';
    };
    html += '&lt;/ul&gt;';
    document.getElementById('todos').innerHTML = html;
    var button_delete = document.getElementsByClassName('remove');
    for (var i = 0; i &lt; button_delete.length; i++) {
      button_delete[i].addEventListener('click', remove);
    };
  }
  document.getElementById('add').addEventListener('click', add);
  show();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="content" style=""&gt;
    &lt;!--Grid View Page--&gt;
    &lt;div class="panel" title="Title"&gt;
      &lt;input id="task"&gt;&lt;button id="add"&gt;Add&lt;/button&gt;
      &lt;div id="todos"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>