appendChild Possibly Deleting Element?

Question

I am trying to create a simple to-do list application JavaScript. I have written up JavaScript to basically take the value from an input element and pass it into a few functions.

I created a live example on CodePen, which you may view here: http://cdpn.io/hnBmD

Edit: Code also located below?

It seems like appendChild could possibly be deleting the "li" node that the parent function is creating? May someone please give me a reasonable explanation to this?

Note: I do have the JavaScript in a separate file and it is being loaded right before the ending body tags.

HTML:

<form>
 <p><input type="text" id="inItemText" autofocus><button type="submit" id="submitButton">+</button></p>
</form>
<ul id="toDoList">
</ul>

JavaScript:

// Defining nodes.
var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");
// Once "enter" is pressed or click event is triggered, execute the function.
// The function below is basically checking the value of the input, to make sure the value is empty. If it isn't, it passes the value and the "ul" element node into the addNewItem function.
submitButton.onclick = function(){
      var itemText = inItemText.value;
      if (itemText == "" || itemText == " ") {
        return false;
      } else {
        addNewItem(document.getElementById("toDoList"), itemText);
      }
}
// Once the parameters are passed. This basically creates a "li" element, applies the value of the input element into the innerText of the "li" element created and then appends the "ul" with the "li" we just created. Also, it resets the value of the input so we can enter another checklist item in.
function addNewItem(list, itemText) {
    var listItem = document.createElement("li");
    listItem.innerText = itemText;
    list.appendChild(listItem);
    itemText = inItemText.value = "";
}

Thank you!

Answer 1

You need to return false from the onclick function after it calls addNewItem . Otherwise it will submit the form, which reloads the page.

submitButton.onclick = function(){
      var itemText = inItemText.value;
      if (itemText == "" || itemText == " ") {
        return false;
      } else {
        addNewItem(document.getElementById("toDoList"), itemText);
        return false;
      }
}

DEMO

Or more simply:

submitButton.onclick = function(){
    var itemText = inItemText.value.trim();
    if (itemText !== "" || itemText == " ") {
        addNewItem(document.getElementById("toDoList"), itemText);
    }
    return false;
}

Or, as one of the comments suggested, get rid of the form, then there's nothing to submit.

Answer 2

Remove the form if not necessary or just prevent the default form submit action.

submitButton.onclick = function (e) {
        e.preventDefault();
        var itemText = inItemText.value;
        if (itemText == "" || itemText == " ") {
            return false;
        } else {
            addNewItem(document.getElementById("toDoList"), itemText);
        }
 }

Answer 3

The button element in your HTML has a type attribute of submit . When its click event is triggered, the default action is performed which is to submit the form. You need to prevent this default behaviour.

var inItemText = document.getElementById("inItemText");
var submitButton = document.getElementById("submitButton");

submitButton.onclick = function(e){
  e.preventDefault(); //prevent it from submitting
  var itemText = inItemText.value;
  if (itemText == "" || itemText == " ") {
    return false;
  } else {
    addNewItem(document.getElementById("toDoList"), itemText);
  }
}

function addNewItem(list, itemText) {
 var listItem = document.createElement("li");
 listItem.innerText = itemText;
 list.appendChild(listItem);
}