Question

我是Java的新手。我建立了一个简单的无序任务列表，可以在其中添加和删除项目。不幸的是，按下创建按钮时也会添加空白列表项。如何更改Javascript代码，使其不会添加空白列表项，而只会在空白时提醒用户添加有效的项？

除了下面的代码，我还尝试将if语句放入createItem函数中，但是随后弹出所有项目的警报，并且仍然会创建空白项目。

let ourForm = document.getElementById("ourForm");
let ourField = document.getElementById("ourField");
let ourList = document.getElementById("ourList");

ourForm.addEventListener("submit", (e) => {
    e.preventDefault();
    createItem(ourField.value);
});

function createItem(x) {
    let ourHTML = `<li>${x} <button onclick="deleteItem(this)">Delete</button></li>`;
    ourList.insertAdjacentHTML("beforeend", ourHTML);
    ourField.value = "";
    ourField.focus();
};

function emptyItem() {
    if (ourField.value == "") {
        alert("Enter a valid to-do item");
        return false;
    };
};

function deleteItem(elementToDelete) {
    elementToDelete.parentElement.remove();
};

Answer 1

您创建了emptyItem()函数，但从未调用过它。

Answer 2

您可以使用x.length > 0检查要添加的项目是否为空。试试这个

let ourForm = document.getElementById("ourForm");
let ourField = document.getElementById("ourField");
let ourList = document.getElementById("ourList");

ourForm.addEventListener("submit", e => {
  e.preventDefault();
  createItem(ourField.value);
});

function createItem(x) {
  if (x.length > 0) {
    let ourHTML = `<li>${x} <button onclick="deleteItem(this)">Delete</button></li>`;
    ourList.insertAdjacentHTML("beforeend", ourHTML);
    ourField.value = "";
    ourField.focus();
  } else {
    alert("Enter a valid to-do item");
  }
}

function deleteItem(elementToDelete) {
  elementToDelete.parentElement.remove();
}

Answer 3

您可以尝试添加

if (!emptyItem()) return false;

在createItem(ourField.value);表单提交事件之前。

但是在这种情况下，!emptyItem()并不是很明确，您可以将函数的定义更改为

function emptyItem() {
    if (ourField.value == "") {
        alert("Enter a valid to-do item");
        return true;
    };

    return false;
};

并更改验证以使其易于理解

if (emptyItem()) return false;

let ourForm = document.getElementById("ourForm");
let ourField = document.getElementById("ourField");
let ourList = document.getElementById("ourList");

ourForm.addEventListener("submit", (e) => {
    e.preventDefault();


    if (emptyItem()) return false;

    createItem(ourField.value);
});

function createItem(x) {
    let ourHTML = `<li>${x} <button onclick="deleteItem(this)">Delete</button></li>`;
    ourList.insertAdjacentHTML("beforeend", ourHTML);
    ourField.value = "";
    ourField.focus();
};

function emptyItem() {
    if (ourField.value == "") {
        alert("Enter a valid to-do item");
        return true;
    };

    return false;
};

function deleteItem(elementToDelete) {
    elementToDelete.parentElement.remove();
};

<form name="ourForm" id="ourForm">
    <input type="text" id="ourField" name="ourField">

    <button type="submit">Send</button>
</form>

<ul id="ourList"></ul>

Answer 4

我发现，如果我更改了原始代码的顺序，那么它也可以工作并且很简单：

let ourForm = document.getElementById("ourForm");
let ourField = document.getElementById("ourField");
let ourList = document.getElementById("ourList");

ourForm.addEventListener("submit", (e) => {
  e.preventDefault();  
  createItem(ourField.value);
});

function createItem(x) {
  let ourHTML = `<li>${x} <button onclick="deleteItem(this)">Delete</button></li>`;
  if (ourField.value == "") {
    alert("Enter a valid to-do item");
    return false;
  };
  ourList.insertAdjacentHTML("beforeend", ourHTML);
  ourField.value = "";
  ourField.focus();
};

function deleteItem(elementToDelete) {
  elementToDelete.parentElement.remove();
};

寻求如何防止空白的新项目添加到无序列表中

4 个答案: