Home What is the best way to check if a list item already exist before appending a new list item?

Questions

What is the best way to check if a list item already exist before appending a new list item?

July 8, 2022

I am creating a code to add new fruits to a list of fruits but I needed to check if the fruit already exist before adding the new one. My code is below. I know there are errors because I’m still new to javascript. So I need corrections.

<!DOCTYPE html>
<html>
     <head>
         <title> Add new fruits </title>
     </head>
     <body>
         <div>
             <p>Enter a fruit to add to the list</p>
  
             <input type="text" id="fruit" />
             <Button onclick="prependContent()"> Add to List </button>
 
        </div>
            <ul id="list">
            <li> Mangoes </li>
            <li> Bananas </li>
            <li> Oranges </li>
        </ul>

    <script>
        function prependContent() {
            var fruit = document.getElementById("fruit").value;   
            var list = document.getElementById("list");
            var listItem = list.getElementsByTagName("li"); 
   
            if (fruit =="") { //validate input
                alert("enter a fruit name");
                return false;
            } else { //check if fruit already exist */
                for (let i=0; i<listItem.lenght; i++) {               
                if (listItem[i]=fruit) {
                     alert("fruit already exist in the list");
                   return false;
                } else { //add new fruit 
                    var li = document.createElement("li");
                    var textNode = document.createTextNode(fruit);       
      
   li.appendChild(textNode);
  
              
   list.prepend(li);
         }; 
     } 
   </script>
</body>

>Solution :

function prependContent() {
  var fruit = document.getElementById("fruit").value;
  var list = document.getElementById("list");
  var listItem = list.getElementsByTagName("li");
 
  if (!fruit) { //validate input
    alert("enter a fruit name");
    return
  } 
  else { //check if fruit already exist */
    for (let i = 0; i < listItem.length; i++) {
      //listItem[i] contain element. use it's innerText property instead to access it's content.
      // '=' operator is for assigment. use '===' strict equality to check equality instead 
      if (listItem[i].innerText === fruit) {
        alert("fruit already exist in the list");
        return
      } 
     
    }
      //add new fruit 
      //put its outside else because if u check in each list there will only one item thats is equal. so if fruit exist in list[3] but not list[0], with your code it's will append new child even though the fruit actually exist in list[3]
        var li = document.createElement("li");
        var textNode = document.createTextNode(fruit);

        li.appendChild(textNode);


        list.prepend(li);
      //u miss some closing bracket
  }
  }

<!DOCTYPE html>
<html>

<head>
  <title> Add new fruits </title>
</head>

<body>
  <div>
    <p>Enter a fruit to add to the list</p>

    <input type="text" id="fruit" />
    <Button onclick="prependContent()"> Add to List </button>

  </div>
  <ul id="list">
    <li> Mangoes </li>
    <li> Bananas </li>
    <li> Oranges </li>
  </ul>


</body>