如果li元素值不存在，Javascript會將其添加到空串列中

我在 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]);    
           }

          }
        }
}

uj5u.com熱心網友回復：

如果我理解任務正確，您需要通過單擊按鈕將專案添加到串列中。
如果存在相同的專案（不區分大小寫），則不會發生任何事情。

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>

uj5u.com熱心網友回復：

您在事件偵聽器和元素創建方面走在了正確的軌道上，但您的原始代碼似乎與您的既定目標不太匹配。

這是一個您可能會覺得有用的解決方案，并附有一些解釋性評論：

  // 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>

標籤：

上一篇：為什么Wrapper覆寫子div？

下一篇：如何使固定輸入保持在底部？