title: JS DOM - add/delete buttons not working
body: <p>Write the Javascript code that allows the user to type in text that is added to an ordered list. Create two buttons (add item and delete last) that allows the user to add the item when pressed or delete the last item added.
  There should be an optional “Delete #” button, followed by a text input. This will delete the item # inputted by the user.
  Also, if the user clicks in the text input under “enter item to add”, you should delete any existing text value that may already be there.</p>
  
  <p>The thing is my code works fine when I manually run a function such as add(); on the console. But the moment I typed in my remove(); function in the js file the add button doesn't work unless I manually call it in the console. The remove button has the same issue.   </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>window.onload = function() {
    var button = document.getElementById("add");
    var button1 = document.getElementById("delete");
    var button2 = document.getElementById("deleteItem");
    var input = document.getElementById("input");
    button.onclick = add;
    button.onclick = remove;
    button.onclick = specific;
    input.onclick = clearText;
  }
  
  function clearText() {
    this.value = "";
  }
  
  function add() {
    var input = document.getElementById("input");
    var output = document.getElementById("list");
    if (input.value != "") {
      var li = document.createElement("li");
      li.innerHTML = input.value;
      output.appendChild(li);
    }
  }
  
  
  function remove() {
    var list = document.getElementById("list");
    var allLi = list.getElementsByTagName("li")
    if (allLi.length &gt; 0) {
      list.removeChild(allLi[allLi.length - 1]);
    }
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>ol {
    width: 200px;
    height: 200px;
    background-color: silver;
    border: 1px solid black;
    overflow: auto;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;h1&gt; Todo List++ &lt;/h1&gt;
  &lt;p&gt; Enter item to add: &lt;br&gt; &lt;input id="input" type="text"&gt; &lt;/p&gt;
  &lt;button id="add"&gt; Add item &lt;/button&gt;
  &lt;button id="delete"&gt; Delete &lt;/button&gt;
  &lt;button id="deleteItem"&gt; DeleteItem# &lt;/button&gt;
  &lt;input type="text" id="item" style="width:30px;"&gt; &lt;br&gt;
  &lt;!-- You need to add in the buttons --&gt;
  &lt;!-- it is OK if your HTML looks slightly different than the one in the PDF --&gt;
  &lt;!-- as long as your code can perform the same function --&gt;
  &lt;ol id="list"&gt; &lt;/ol&gt;</code></pre>
  </div>
  </div>
  </p>