I'm making a simple TaskList with javaScript, I'd like to add a function to make it impossible to add something already written.

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");
    }
  }
});

CodePudding user response：

You can store the previous responses in an array, then check whether the array contains the response before adding:

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");
    }
  }
});

CodePudding user response：

You can try this:

• Create a list to store all tasks.
• On validation, add task to this list
• To validate, search through this taskList.
  • Do a filter. This way you can show suggestion in future. You can also introduce also for partial match as well
  • To match, use .toLowerCase on both so you test case-insensitively

Suggestion:

• You do not need a preventDefault for click unless you have a submit button.
• Start splitting you function in smaller function to have single responsibility. That will help in maintaining your codebase later.
• DO NOT fetch elements on tag names. Always use more complex and unique selectors. Having element selector can make your code fragile.

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>