How to reject duplicate names

That makes sense. I'll play around with it. Thanks very much!

Since your mentor didn't show up, here's one way to implement what I proposed above:

form.addEventListener('submit', e => {
    e.preventDefault();
    const text = input.value;
    input.value = '';
    for (i=0; i < ul.children.length; i++) {
      if (text == ul.children[i].children[0].textContent) {
        alert("That name has already been entered, try another.");
        return;
      }
    }
    const li = createLI(text);
    ul.appendChild(li);
  });

There it is! Thanks very much! I don't think I would've ever gotten this part:

ul.children[i].children[0].textContent

That's certainly not the only way to get to the name, and probably not the best. I relied on the span being the first child of the list item.

Hey Steven, I really like your solution. I would only add one more thing to it, that your solution doesn't check for letter cases, e.g "Mark" vs "mark". I would add a .toUppercase to the if condition, like this:

form.addEventListener('submit', (e) => {
    e.preventDefault();
    const text = input.value;
    input.value = '';
    for (i=0; i < ul.children.length; i++) {
      if (text.toUpperCase == ul.children[i].children[0].textContent.toUpperCase) {
        alert("That person has already been invited.");
        return;
      }
    }
    const li = createLI(text);
    ul.appendChild(li);
  });

Since JavaScript is case-sensitive by nature, I wouldn't consider a name with different cases to be a "duplicate". But if you want to exclude similar names with case differences in addition to the duplicates for some reason, you will need to call the toUpperCase() method by adding the parentheses to the end of the method name.

Sorry that I ask you so many questions Steven Parker, but I'm just trying to rap this ish around my brain.

The answer you provided earlier makes the same 'That name has already been used' alert come up each time I enter any name at all.

Would appreciate any advice or hints on how to fix this.

  /*enters name to the list of invitees and checks to see if an empty 
   string is entered or if duplicate names are entered */
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const text = input.value;
    input.value = '';
    const li = createLi(text);
    ul.appendChild(li);

    const emptyEntry = input.value = '';
    //if text entry submitted is empty, then an alert appears and the empty entry is removed//
    if (text === emptyEntry) {
    alert('You need to add real people');
    ul.removeChild(li);
   }

    for (i=0; i < ul.children.length; i++) {
if (text == ul.children[i].children[0].textContent) {
alert('That name has already been used');
  return;
}
  }

  });

Nathan Angulo

I had the same problem until I moved the, ul.appendChild(li) to the bottom of the submit event listener, after the if and for statements.

That seemed to do the trick!

  form.addEventListener('submit', e => {
    e.preventDefault();
    const text = input.value;
    input.value = '';
    const li = createLi(text);
    if (text === '') {
      alert('Please enter a name');
      ul.removeChild(li);
    }
    for (i=0; i < ul.children.length; i++) {
      if (text === ul.children[i].children[0].textContent) {
        alert("That name has already been entered, try another.");
        return;
      }
    }
    ul.appendChild(li);
  });

A clever idea, and it makes the search simpler; but the trade off is having to maintain a separate array with redundant data and keep it in sync with the object array.

Indeed, editing names causes an issue because the entered name remains in the array after the edit. Therefore running through the list and re-building the array before each name is entered ensures it includes edited names.

At the top, declare the empty array as a variable.

var namesList = []

Before committing an entered name to the list, loop through the list to create an array of the names already in the list

// Loops through names in the list and adds each one to namesList array
for ( var i=0; i<lis.length; i++) {
   var span = lis[i].firstElementChild;
   namesList.push(span.textContent.toUpperCase());
}
// Output the array to the console
console.log(namesList);

Then run a check to see if the array is empty in order to assign a value to 'checkDuplicate'

if ( namesList != [] ) {
   var checkDuplicate = namesList.indexOf(text.toUpperCase());
} else {
   // The variable needs a value in the case of an empty array
   checkDuplicate = 0;
}
// Now that we have assigned a value to 'checkDuplicate' we can reset the array to empty again    
namesList = [];

The final step is to account for an empty field or a duplicate name before committing the name to the list.

if (input.value == '') {
  alert('You have not entered a name!')
} else if ( checkDuplicate>-1 ) {
  alert('You have already entered this name!');
} else {
  const li = createLI(text);
  ul.appendChild(li);
  input.value = '';
}

Not so simple now but the array could always be used in a different context for an additional feature at some point.

This is a good idea for its simplicity. However, since it uses indexOf, "str" would be blocked if "string" were already on the list. It's a comparatively rare problem when listing names. Especially if using full names, first name + last initial, or something like that. But, if only using one name, the error could be encountered such as with the case of "Jimmy" causing "Jim" to be blocked.

This didn't work for me. But I think you're going in the right direction. I'll keep working on it later today.