使得不可能重复我在javascript输入中输入的内容

rqenqsqc  于 2022-12-17  发布在  Java
关注(0)|答案(2)|浏览(138)

我正在用javaScript做一个简单的任务列表,我想添加一个函数,使它不可能添加已经写好的东西。

const input = document.querySelector("input");
const addBtn = document.querySelector(".btn-add");
const ul = document.querySelector("ul");
const empty = document.querySelector(".empty");

addBtn.addEventListener("click", (e) => {
  e.preventDefault(); //previene que se recargue la pagina al ser parte de un Form

  const text = input.value;
  if (text !== "") {
    const li = document.createElement("li");
    li.appendChild(addDeleteBtn());
    const p = document.createElement("p");
    p.textContent = text;
    li.appendChild(p);
    ul.appendChild(li);
    input.value = "";
    empty.style.display = "none";
  } else {
    if (text == text) {
      alert("Introduce algo");
    }
  }
});
voase2hg

voase2hg1#

您可以将以前的响应存储在数组中,然后在添加之前检查数组是否包含响应:

const input = document.querySelector("input");
const addBtn = document.querySelector(".btn-add");
const ul = document.querySelector("ul");
const empty = document.querySelector(".empty");

const inputs = []

addBtn.addEventListener("click", (e) => {
  e.preventDefault(); //previene que se recargue la pagina al ser parte de un Form

  const text = input.value;
  if (text !== "" && inputs.includes(text)) {
    inputs.push(text)
    const li = document.createElement("li");
    li.appendChild(addDeleteBtn());
    const p = document.createElement("p");
    p.textContent = text;
    li.appendChild(p);
    ul.appendChild(li);
    input.value = "";
    empty.style.display = "none";
  } else {
    if (text == text) {
      alert("Introduce algo");
    }
  }
});
yyyllmsg

yyyllmsg2#

你可以试试这个:

  • 创建存储所有任务的列表。
  • 验证时,将任务添加到此列表
  • 要进行验证,请搜索此taskList。
  • 做一个过滤器。这样你就可以在将来显示建议。你也可以为部分匹配引入
  • 要匹配,请在两者上都使用.toLowerCase,以便不区分大小写地进行测试
    建议:
  • 您不需要preventDefault来单击,除非您有一个提交按钮。
  • 开始把你的函数拆分成更小的函数,使其具有单一的职责。这将有助于以后维护你的代码库。
  • 不要在标签名称上提取元素。总是使用更复杂和唯一的选择器。拥有元素选择器会使你的代码脆弱。
const input = document.querySelector("#txtTaskInput");
const addBtn = document.querySelector(".btn-add");
const ul = document.querySelector(".taskList");
const empty = document.querySelector(".empty");

const addDeleteBtn = () => {
  const button = document.createElement("button");
  button.textContent = 'Delete'
  return button
}
const createLi = (text) => {
  const li = document.createElement("li");
  const p = document.createElement("p");
  p.textContent = text;
  li.appendChild(p);
  li.appendChild(addDeleteBtn());
  return li;
}
const tasks = []
addBtn.addEventListener("click", (e) => {
  e.preventDefault(); //previene que se recargue la pagina al ser parte de un Form

  const text = input.value.trim();
  const dupes = tasks.filter((task) => 
    task.toLowerCase().includes(text.toLowerCase())
  )
  if (text !== "" && dupes.length === 0) {
    tasks.push(text)
    const li = createLi(text)
    ul.appendChild(li);
    input.value = "";
    empty.style.display = "none";
  } else {
    if (text == text) {
      alert("Introduce algo");
    }
  }
});
li {
  display: flex;
  width: 300px;
  height: 30px;
  justify-content: space-between;
  margin-bottom: 8px;
}
<input id='txtTaskInput' />
<button class='btn-add'>Add</button>
<button class='empty'>Empty</button>
<ul class='taskList'></ul>

相关问题