如何修復警報邏輯的空值？

我正在嘗試制定一個邏輯，即如果未填寫用戶輸入、日期和時間，它會向用戶發出警報，讓他們知道上面提到的部分，但由于某種原因，即使我有那些包含值的部分，它仍然顯示為 null。

結果應該是：

如果用戶輸入沒有值，則應顯示到期日期或時間警報。

// 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 >
        <div >
        <div  data-id="${id}">
        <input type="checkbox" >
        <div >${taskNew}</div>
        <label >${taskDate}</label>
        <label >${taskTime}</label>
    </div>
    <div >
        <button  data-id="">Edit</button>
        <button  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>

uj5u.com熱心網友回復：

從表單元素獲得的所有值都是字串。即使元素為空，值仍然是""，null因此檢查null不是正確的方法。

而是測驗是否缺少任何“真實”值，如下所示。

// 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 >
        <div >
        <div  data-id="${id}">
        <input type="checkbox" >
        <div >${taskNew}</div>
        <label >${taskDate}</label>
        <label >${taskTime}</label>
    </div>
    <div >
        <button  data-id="">Edit</button>
        <button  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>

uj5u.com熱心網友回復：

謝謝您的幫助。

在進一步研究之后，我還找到了另一種方法。

// 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 >
        <div >
        <div  data-id="${id}">
        <input type="checkbox" >
        <div >${taskNew}</div>
        <label >${taskDate}</label>
        <label >${taskTime}</label>
    </div>
    <div >
        <button  data-id="">Edit</button>
        <button  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>

標籤：javascript

上一篇：過濾并包含在陣列中，這是如何作業的？

下一篇：vanillajsonclick洗掉父元素