如何在JavaScript的if语句中集成SweetAlert2实现空提交提示？

我正在用JavaScript编写待办列表，想实现输入框为空时按下回车键，用SweetAlert2弹出提示的功能。按照官方文档添加代码后无法正常运行，不清楚如何在if语句中正确编写逻辑，寻求帮助。

安装命令 #

npm install sweetalert2

index.html 代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>to-do App</title>
  </head>
  <body>
    <header>
      <form id="new-task-form">
        <input
          type="text"
          id="new-task-input"
          placeholder="What's your plans?"
        />
        <input type="submit" id="new-task-submit" value="ADD" />
      </form>
    </header>

    <main>
      <section class="task-list">
        <h2>Tasks</h2>

        <div id="tasks"></div>
      </section>
    </main>
    <script src="index.js"></script>
  </body>
</html>

main.js 代码 #

window.addEventListener("load", () => {
  const form = document.querySelector("#new-task-form");
  const input = document.querySelector("#new-task-input");
  const list_el = document.querySelector("#tasks");

  form.addEventListener("submit", (e) => {
    e.preventDefault();

    const task = input.value;
    const Swal = require('sweetalert2')   // Added this!

    if (!task) {
      Swal.fire("Whoop! Forgot to add something?");   // Added this!
      return;
    }

    const task_el = document.createElement("div");
    task_el.classList.add("task");

    const task_content_el = document.createElement("div");
    task_content_el.classList.add("content");

    task_el.appendChild(task_content_el);

    const task_input_el = document.createElement("input");
    task_input_el.classList.add("text");

    task_input_el.type = "text";

    task_input_el.value = task;
    task_input_el.setAttribute("readonly", "readonly");

    task_content_el.appendChild(task_input_el);

    const task_actions_el = document.createElement("div");
    task_actions_el.classList.add("actions");

    const task_edit_el = document.createElement("button");
    task_edit_el.classList.add("edit");

    const task_delete_el = document.createElement("button");
    task_delete_el.classList.add("delete");
    task_delete_el.innerHTML = "Delete";

    task_actions_el.appendChild(task_edit_el);
    task_actions_el.appendChild(task_delete_el);

    task_el.appendChild(task_actions_el);

    list_el.appendChild(task_el);

    input.value = "";

    task_edit_el.addEventListener("click", () => {
      if (task_edit_el.innerText.toLowerCase() === "edit") {
        task_input_el.removeAttribute("readonly");
        task_input_el.focus();
        task_edit_el.innerText = "Save";
      } else {
        task_input_el.setAttribute("readonly", "readyonly");
        task_edit_el.innerText = "Edit";
      }
    });

    task_delete_el.addEventListener("click", () => {
      list_el.removeChild(task_el);
    });
  });
});

问题原因及修复方案 #

你的代码存在三个核心问题，按以下步骤修改即可解决：

1. 替换require为浏览器兼容的引入方式 #

require是Node.js的模块语法，浏览器环境不支持。直接在index.html的</body>前添加SweetAlert2的CDN链接，全局即可使用Swal对象：

<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>

同时删除main.js中const Swal = require('sweetalert2')这一行。

2. 完善空值判断逻辑 #

原代码仅判断!task，但用户输入全空格时会绕过判断。修改输入值处理逻辑，先去除首尾空格：

const task = input.value.trim();

3. 修复编辑功能的拼写错误 #

编辑按钮逻辑中，setAttribute("readonly", "readyonly")的属性值拼写错误，应改为"readonly"，否则编辑后无法锁定输入框。

修改后的核心代码片段 #

form.addEventListener("submit", (e) => {
  e.preventDefault();

  const task = input.value.trim();

  if (!task) {
    Swal.fire("提示", "Whoop! Forgot to add something?", "warning");
    return;
  }

  // 后续代码保持不变...

  task_edit_el.addEventListener("click", () => {
    if (task_edit_el.innerText.toLowerCase() === "edit") {
      task_input_el.removeAttribute("readonly");
      task_input_el.focus();
      task_edit_el.innerText = "Save";
    } else {
      task_input_el.setAttribute("readonly", "readonly");
      task_edit_el.innerText = "Edit";
    }
  });
});

内容的提问来源于stack exchange，提问作者user19816368