Estoy tratando de hacer una lógica de que si la entrada del usuario, la fecha y la hora no están llenas, le da al usuario una alerta para tener las secciones mencionadas anteriormente, pero por alguna razón, incluso cuando tengo esas secciones que contienen valores, todavía muestra nulo.
El resultado debe ser:
Si no hay valor para la entrada del usuario, debería aparecer una alerta de fecha u hora de vencimiento.
// variables object const el = { form: document.querySelector(".form"), input: document.querySelector(".user-input"), list: document.querySelector(".list"), 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 const creatTask = (task) => { const id = createId(); const taskNew = el.input.value; const taskDate = el.date.value; const taskTime = el.time.value; const tasks = document.createElement("div"); tasks.innerHTML = ` <div class="task-content"> <div class="list-of-task"> <div class="task" data-id="${id}"> <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>`; taskList.push(tasks); console.log(taskList); el.list.appendChild(tasks); return task }; //event listner that listens for add button. function addTask(taskNew, taskDate, taskTime) { if (taskNew == null) { alert("Please add a new Task") } if (taskDate == null) { alert("Please add a new Task with a due date"); } if (taskTime == null) { alert("Please add a new Task with a due time"); } creatTask(); } <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> <div class="list"></div>Todos los valores obtenidos de los elementos de formulario son cadenas. Incluso si el elemento está vacío, el valor sigue siendo "" , no es null , por lo que verificar si es null no es el enfoque correcto.
En su lugar, pruebe la ausencia de cualquier valor de "veracidad" como se ve a continuación.
// variables object const el = { form: document.querySelector(".form"), input: document.querySelector(".user-input"), list: document.querySelector(".list"), 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 const creatTask = (task) => { const id = createId(); const taskNew = el.input.value; const taskDate = el.date.value; const taskTime = el.time.value; const tasks = document.createElement("div"); tasks.innerHTML = ` <div class="task-content"> <div class="list-of-task"> <div class="task" data-id="${id}"> <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>`; taskList.push(tasks); console.log(taskList); el.list.appendChild(tasks); return task }; //event listner that listens for add button. function addTask(taskNew, taskDate, taskTime) { if (!taskNew) { alert("Please add a new Task") } if (!taskDate) { alert("Please add a new Task with a due date"); } if (!taskTime) { alert("Please add a new Task with a due time"); } creatTask(); } <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> <div class="list"></div>Gracias por la ayuda.
También encontré otra forma de hacerlo después de investigar más.
// variables object const el = { form: document.querySelector(".form"), input: document.querySelector(".user-input"), list: document.querySelector(".list"), 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 const creatTask = (task) => { const id = createId(); const taskNew = el.input.value; const taskDate = el.date.value; const taskTime = el.time.value; if (taskNew.length == 0) { alert("Please add a new Task"); } if (taskDate.length == 0) { alert("Please add a new Task with a due date"); } if (taskTime.length == 0) { alert("Please add a new Task with a due time"); } const tasks = document.createElement("div"); tasks.innerHTML = ` <div class="task-content"> <div class="list-of-task"> <div class="task" data-id="${id}"> <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>`; taskList.push(tasks); console.log(taskList); el.list.appendChild(tasks); return task }; //event listner that listens for add button. function addTask() { creatTask(); } <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> <div class="list"></div>