Buenos días,

Cuál quiero que sea el resultado:

Cuando el usuario hace clic en el botón Agregar, crea una nueva lista

Problema que estoy teniendo:

Cuando hago clic en el botón Agregar, aparece un error que indica que el valor es nulo.

Creé una lógica de que si el valor de entrada es nulo, debería haber una alerta.

HTML

 <div class="form"> <input class ="user-input" type="text"> <input class="date" type="date"> <input class="time" type="time"> <button onclick="addTask()" class="add" id="add">+</button> </div>

JS

 // variables object const el = { form: document.querySelector(".form"), input: document.querySelector(".user-input"), date: document.querySelector(".date"), time: document.querySelector(".time"), }; //local storage key const storage_key = "tasks-storage-key"; //Create ID const createID = () => `${Math.floor(Math.random() * 10000)}-${new Date().getTime()}` //variable of empty array that gets new task let taskList =[]; // function that renders task list //function that creates new tasks with date and time function addTask() { const id = createID(); const taskNew = el.input.value; const taskDate = el.date.value; const taskTime = el.time.value; if (taskNew != null) { const tasks = document.createElement("div"); tasks.innerHTML = ` <div class="task-content"> <div class="list-of-task"> <div class="id">${id}</div> <input type="checkbox" class="tick"> <div class="new-task-created">${taskNew}</div> <label class="due-date">${taskDate}</label> <label class="due-time">${taskTime}</label> </div> <div class="atcion-buttons"> <button class="edit" data-id="">Edit</button> <button class="delete" data-id="">Delete</button> </div> </div>` }; return taskNew };