Trouble with duplicates

Question

I can't seem to get this function to work. The function is supposed to loop through the LI in the UL and check the text input to the text content of the span element of each LI. Then if a duplicate is found: an alert window gets triggered. 
```javascript
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const text = input.value;
    checkDuplicates();
    if (text === '') {
      alert('Please enter a name');
    } else {
    input.value = '';
    const li = createLI(text);
    ul.appendChild(li);
    }
  });
  function checkDuplicates () {
    let text = input.value;
    let ul = document.getElementById('invitedList');
    let li = ul.children;
    for (let i = 0; i < ul.length; i++) {
      let names = li[i].firstElementChild.textContent;
      if (text === names) {
        alert('That person already exists in the database. Please try another name.');
      }
    }
  }
```

Cameron Childres · Accepted Answer

Hi Hosung,
The problem is in your condition of the for loop:
javascript
let ul = document.getElementById('invitedList');
let li = ul.children;
for (let i = 0; i < ul.length; i++)

The variable ul does not have a length since it is simply the ul element, so the loop never runs. If you change this to li.length you'll be accessing the list of ul's children which will allow the loop to run.
With the loop running you'll notice that the alert box pops up but the name still gets added. One possible way to stop that behavior would be to include checkDuplicates() in your if/else logic:
```javascript
form.addEventListener('submit', (e) => {
    e.preventDefault();
    const text = input.value;
    if (checkDuplicates() === true) {
      alert('That person already exists in the database. Please try another name.');
    } else if (text === '') {
      alert('Please enter a name');
    } else {
    input.value = '';
    const li = createLI(text);
    ul.appendChild(li);
    }
  });
  function checkDuplicates () {
    let text = input.value;
    let ul = document.getElementById('invitedList');
    let li = ul.children;
    for (let i = 0; i < li.length; i++) {
      let names = li[i].firstElementChild.textContent;
      if (text === names) {        
        return true;
      } else {
        return false;
      }
    }
  }
```

Welcome to the Treehouse Community

Looking to learn something new?

Hosung Kim

Hosung Kim

Trouble with duplicates

1 Answer

Cameron Childres

Cameron Childres

Hosung Kim

Hosung Kim