如果 li 元素值不存在，Javascript 会将其添加到空列表中

Question

我在 Javascript 中遇到问题。我正在向 'ul' 元素添加新的列表项，而这个列表一开始是空的，我不想添加两次相同的值。当我编写 if 语句时，我得到了异常，因为我的列表是空的，所以结果返回 null。 我该如何解决这个问题？ 提前谢谢你...

HTML 代码

 <input type="text" id="the-filter" placeholder="Search For..." />
        <div class="list-container">
            <ul id="myList"></ul>
            <button  id="button">Click</button>

Javascript 代码

let newlist = document.querySelector("#myList");
const li = document.getElementsByClassName('list-group-item');
const button = document.getElementById("button");
const button.addEventListener('click' , listName);
const input = document.getElementById("the-filter");

function listName()

    const inputVal = input.value;
 
    for (i = 0; i < li.length; i++) {
   
        if ((li[i].innerHTML.toLocaleLowerCase().includes(inputVal) && inputVal!="") || 
        (li[i].innerHTML.toUpperCase().includes(inputVal) && inputVal!="")) {             
            let newItem = document.createElement("li");
            li[i].classList.add("list-group-item");
            let textnode = document.createTextNode(li[i].innerHTML.toLocaleLowerCase());
            newItem.appendChild(textnode);

           if((newlist.children[0].innerHTML.toLocaleLowerCase().includes(inputVal))){
            newlist.insertBefore(newItem, newlist.childNodes[0]);    
           }

          }
        }
}

Answer 1

如果我对任务的理解正确，您需要通过单击按钮将项目添加到列表中。
如果存在相同的项目（不区分大小写），则不会发生任何事情。

const list = document.querySelector("#myList");
const button = document.getElementById("button");
button.addEventListener("click", listName);
const input = document.getElementById("the-filter");

function listName() {
  const inputVal = input.value;
  const [...lis] = document.getElementsByClassName("list-group-item");
  
  const same = lis.find((el) => el.textContent.toLowerCase() === inputVal.toLowerCase());
  if (same) {
    return;
  }
  
  let newItem = document.createElement("li");
  newItem.classList.add("list-group-item");
  newItem.textContent = inputVal;
  list.appendChild(newItem)
}

<input type="text" id="the-filter" placeholder="Search For..." />
<div class="list-container">
  <ul id="myList"></ul>
  <button id="button">Click</button>
</div>

Answer 2

您在事件侦听器和元素创建方面处于正确轨道，但您的原始代码似乎与您声明的目标不太匹配。

这是一个您可能会觉得有用的解决方案，其中包含一些解释性 cmets：

  // Identifies some DOM elements
  const
    input = document.getElementById("my-input"),
    newList = document.getElementById("my-list"),
    items = document.getElementsByClassName('list-group-item'),
    button = document.getElementById("my-button");
  
  // Focuses input, and calls addItem on button-click
  input.focus();
  button.addEventListener('click', addItem);

  // Defines the listener function
  function addItem(){

    // Trims whitespace and sets string to lowerCase
    const inputTrimmedLower = input.value.trim().toLocaleLowerCase();
    
    // Clears and refocuses input
    input.value = "";
    input.focus();

    // Ignores empty input
    if (!inputTrimmedLower) { return; }
    
    // Ignores value if a list item matches it
    for (const li of items) {
      const liTrimmedLower = li.textContent.trim().toLocaleLowerCase();
      if (liTrimmedLower === inputTrimmedLower) {
        console.log(`${inputTrimmedLower} is already listed`);
        return;
      }
    }

    // If we got this far, we want to add the new item
    let newItem = document.createElement("li");
    newItem.classList.add("list-group-item");
    newItem.append(inputTrimmedLower); // Keeps lowerCase, as your original code
    newList.prepend(newItem); // More modern method than `insertBefore()`
  }

<input id="my-input" />
<ul id="my-list"></ul>
<button id="my-button">Click</button>