title: Not sure why the data object is not passing through to the display function?
body: <p>So I have an object that contains information that has the ID, input value for a new task, date, and time.</p>
  <p>The HTML element is for user input and to show where I am getting the information from.</p>
  <p>HTML</p>
  <pre><code> &lt;div class=&quot;form&quot;&gt;
          &lt;input class =&quot;user-input&quot; type=&quot;text&quot;&gt;
          &lt;input class=&quot;date&quot; type=&quot;date&quot;&gt;
          &lt;input class=&quot;time&quot; type=&quot;time&quot;&gt;
          &lt;button onclick=&quot;addTask()&quot; class=&quot;add&quot; id=&quot;add&quot;&gt;+&lt;/button&gt;
   &lt;/div&gt;
  </code></pre>
  <p>JS</p>
  <pre><code>const el = {
    form: document.querySelector(&quot;.form&quot;),
    input: document.querySelector(&quot;.user-input&quot;),
    list: document.querySelector(&quot;.list&quot;),
    date: document.querySelector(&quot;.date&quot;),
    time: document.querySelector(&quot;.time&quot;),
  };
  
  function makeNewTask() {
  
    const data = {
  
      id: createId(),
      taskNew: el.input.value,
      taskDate: el.date.value,
      taskTime: el.time.value,
    };
  
    return data
    
  }
  //function that creates new tasks with date and time
  function display(data) {
    const tasks = document.createElement(&quot;div&quot;);
  
    tasks.innerHTML = `
         &lt;div class=&quot;task-content&quot;&gt;
          &lt;div class=&quot;task&quot; data-id=&quot;${data.id}&quot;&gt;
          &lt;div class=&quot;new-task-created&quot;&gt;${data.taskNew}&lt;/div&gt;
          &lt;label class=&quot;due-date&quot;&gt;${data.taskDate}&lt;/label&gt;
          &lt;label class=&quot;due-time&quot;&gt;${data.taskTime}&lt;/label&gt;
      &lt;/div&gt;
  
      &lt;div class=&quot;action-buttons&quot;&gt;
          &lt;button onclick=&quot;editItem()&quot; class=&quot;edit&quot; data-id=&quot;${data.id}&quot;&gt;Edit&lt;/button&gt;
          &lt;button onclick=&quot;deleteItem()&quot; class=&quot;delete&quot; data-id=&quot;${data.id}&quot;&gt;Delete&lt;/button&gt;
          &lt;button onclick=&quot;completeItem()&quot; class=&quot;complete&quot; data-id=&quot;${data.id}&quot;&gt;Complete&lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;`;
  
    taskList.push(data);
    el.list.appendChild(tasks);
    makeNewTask();
  }
  
  // this function is the add the task 
  function addTask() {
    display();
  }
  
  </code></pre>
  <p>The End goal is to figure out why the data object is not being passed into the new function when I returned the data in the <code>makeNewTask()</code> and add the callback function of <code>makeNewTask()</code> to <code>display(data)</code></p>
  <p>I have also added a picture of the error I am getting, and by that error, the data object is not being passed through to the display function where you can see the ```data.id`` etc. that is where the information is meant to go and print on the screen. when the user clicks on the add task button</p>
  <p><a href="https://i.stack.imgur.com/e0qmb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/e0qmb.png" alt="enter image description here" /></a></p>