Unable to find duplicate list in "todo list" in Javascript

Molybdenum Oxide 0
Viewed 46

My JS code:- it's been just 1 month learning JS, so pls help me out.

Here inside addItems function I wrote a for-loop to check duplicate list with the help of textContent of list and input value of input text box. But it's not working.

enter image description here

var btn = document.querySelector("button");
var element = document.querySelector("#todo-list");
var children = element.childElementCount;
var li = document.querySelectorAll("li");
var input = document.querySelector("input");

btn.addEventListener("click", addItems);

document.addEventListener("keydown", function(event){
    if(event.key == "Enter")
    {
        addItems();
    }
});

function addItems()
{
    if(input.value == "")
    {
        alert("Empty List cannot be created");
    }

    else{
        var list = document.createElement("li");
        var textNode = document.createTextNode(input.value);
        children++;
        list.appendChild(textNode);

        element.appendChild(list);
        console.log(children);

        //This loop is not working properly after adding new list
        for(var i=0; i<children; i++)
        {
            if(li[i].textContent == input.value){
               alert("Duplicate List");
            }
        }
    }
}
duplicates javascript
3 Answers

You can use Array some method:

const isDuplicate = li.some(item => item.textContent == input.value);
if (isDuplicate) {
    alert("Duplicate List");
    return
}
tieulinh0

You only need to access the <ul> element with the ID of todo-list.

You should also use === (triple-equals) instead of ==. This checks the type and value.

Also, You can access the children using list.childNodes. You could also call forEach using:

list.forEach((child) => {
  if (child.textContent === input.value) {
    // ...
  }
});

Update: Added a delete button for each list item.

const btn = document.querySelector("button");
const list = document.querySelector("#todo-list");
const input = document.querySelector("input");

btn.addEventListener("click", addItems);

document.addEventListener("keydown", function(event) {
  if (event.key === "Enter") {
    addItems();
  }
});

document.addEventListener("click", function(event) {
  if (event.target.classList.contains("btn-delete")) {
    event.target.closest("li").remove();
  }
});

function addItems() {
  if (input.value === "") {
    alert("Empty item cannot be added");
  } else {
    for (let i = 0; i < list.childNodes.length; i++) {
      if (list.childNodes[i].textContent === input.value) {
        alert("Duplicate item");
        return; // Exit function, do not proceed
      }
    }
    const li = document.createElement("li");
    const textNode = document.createTextNode(input.value);
    li.append(textNode);
    const btnDelete = document.createElement("i");
    btnDelete.classList.add('btn-delete');
    li.append(btnDelete);
    list.appendChild(li);
    input.value = ""; // Clear value
  }
}
*, *:before, *:after {
  box-sizing: border-box;
}

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #ADD8E6;
  gap: 1rem;
}

body > div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

#todo-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#todo-list li {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #FFF;
  border-radius: 0.667rem;
  min-width: 20rem;
  padding: 0.5rem;
}

.btn-delete {
  position: absolute;
  width: 1em;
  height: 1em;
  right: 0.25rem;
  top: 0;
  transform: translate(0, 40%);
  color: #D44;
  font-style: normal;
  font-weight: bold;
  cursor: pointer;
}


.btn-delete:after {
  content: '';
}
<div>
  <input type="text" placeholder="Item name..." />
  <button type="button">Add Item</button>
</div>
<ul id="todo-list">
  <li>Hello<i class="btn-delete"></i></li>
  <li>World<i class="btn-delete"></i></li>
</ul>

Mr. Polywhirl0

because you load your list once, when the code is reading, then, your list content in the element var stay empty. you need to reload your list each time to have an updated list. Just move

var element = document.querySelector("#todo-list");

into addItem function

eth3rnit30
Related