Tengo un problema en Javascript. Estoy agregando nuevos elementos de lista a los elementos 'ul' y esta lista está vacía al principio y no quiero agregar los mismos valores dos veces. Cuando escribo la declaración if, obtengo la excepción porque mi lista está vacía, por lo que el resultado es nulo. ¿Cómo puedo solucionar este problema? Gracias de antemano...
Códigos HTML
<input type="text" id="the-filter" placeholder="Search For..." /> <div class="list-container"> <ul id="myList"></ul> <button id="button">Click</button>Códigos 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]); } } } }Si entendí la tarea correctamente, debe agregar elementos a la lista haciendo clic en el botón.
Si existe el mismo elemento (sin distinción entre mayúsculas y minúsculas), entonces no sucede nada.
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>Está en el camino correcto con los detectores de eventos y la creación de elementos, pero su código original no parecía coincidir con su objetivo declarado.
Aquí hay una solución que puede resultarle útil, con algunos comentarios explicativos:
// 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>