How to add a value from input and a created element with JS to the list?

Question

I'm building a list in JavaScript ES5, and it says that 'node' something can't be this or that.

Well, my first real adventure on making the list. But I'm not sure how to figure this out, not sure what's up with the 'node' stuff in the console. I tried node.appendChild, appendNode etc... pretty much everything I could think off.

Here is the CodePen to the code: https://codepen.io/Aurelian/pen/ypKxwL?editors=1010

The JS:

       window.onload = function() {

  ///////////////////
  //Variables
  ///////////////////

  //   Variables
  var newTaskInput = document.querySelector('#new-task');
  var addTaskButton = document.querySelector('#add-task');



  var incompleteTasks = document.querySelector('#incomplete-tasks');
  //var completeTasks = document.querySelector('#complete-tasks');

  function createNewTaskElement(userValue) {
    var listItem = document.createElement('li');
    var label = document.createElement('label');
    var editInput = document.createElement('input');
    var editButton = document.createElement('button');
    var deleteButton = document.createElement('button');

    label.innerHTML = userValue;
    editInput.type = "text";
    editButton.className = "edit";
    deleteButton.className = "delete";

    // Insert that to the li
    listItem.appendChild(label);
    listItem.appendChild(editInput);
    listItem.appendChild(editButton);
    listItem.appendChild(deleteButton);

    return listItem;;
  }


  // Function
  function addNewTask() {

    incompleteTasks.push(createNewTaskElement);
  }

  //function deleteTask () {
    // this.pop;
  //}

  //Events
  addTaskButton.addEventListener('click', addNewTask);

}

The HTML:

<div class="container">


<div class="">
  <label for="new-task">Add Item</label>
  <input id="new-task" type="text">
  <button id="add-task">Add</button>
</div>

<div>
  <h3>Todo List</h3>
  <ul id="incomplete-tasks">
        <li>
          <label>Pay Bills</label>
          <input type="text">
          <button class="edit">Edit</button>
          <button class="delete">Delete</button>
        </li>
  </ul>
</div>


</div>

Answer 1

You're not calling createNewTaskElement as a function and incompleteTasks is not an array its a DOM object so no push method is available.

incompleteTasks.push(createNewTaskElement);

should be

incompleteTasks.appendChild(createNewTaskElement());

Find here in codepen the updated code.