Estoy tratando de obtener una lista de números de un campo de entrada en un programa de conteo de pares de números muy simple. No puedo obtener ningún valor de mi campo de entrada, no importa qué entrada le dé, la consola registra "". Estoy seguro de que es un ajuste fácil que me estoy perdiendo. La línea del problema está en handleSearch(): const searchList = input.value; countPairs es una función que toma un int y una matriz y devuelve un int
document.getElementById("app").innerHTML = ` <h1 style="color:indigo">Let's Count Pairs of Socks!</h1> <h3 style="color:indigo">Enter a list of number socks:</h3> <div id=Lisa></div> `; const input = document.createElement("input"); input.setAttribute("placeholder", "22, 22, 33"); const Lisa = document.getElementById("Lisa"); Lisa.appendChild(input); const button = document.createElement("button"); button.innerText = "Get number of pairs!"; button.style.color = "indigo"; Lisa.innerHTML += `<br><br>`; Lisa.appendChild(button); const results = document.createElement("div"); Lisa.appendChild(results); const handleSearch = () => { const searchList = input.value; console.log(input.value); const numPairs = countPairs(searchList.length, searchList); const title = document.createElement("h3"); title.innerText = "The number of pairs is....."; title.style.color = "indigo"; const pairs = document.createElement("h4"); pairs.innerText = numPairs; pairs.style.color = "indigo"; Lisa.innerHTML += `<br><br>`; Lisa.appendChild(title); Lisa.appendChild(pairs); }; button.addEventListener("click", handleSearch); ````````````````````````````````````````````````````````````Cuando tu lo hagas
someElement.innerHTML +=Esto es equivalente a
someElement.innerHTML = someElement.innerHTML + ...En otras palabras, todos los elementos secundarios se vuelven a analizar de acuerdo con el nuevo HTML que se configuró.
Si anteriormente creó un elemento con createElement y lo puso como elemento secundario, si hace .innerHTML += en el elemento principal, el elemento creado ya no estará conectado al DOM; en su lugar, se creará un nuevo elemento con el mismo marcado HTML. allí en cambio. Entonces, su input.value le mostrará el valor de la entrada que ya no está allí.
Cambie ambas ocurrencias de
Lisa.innerHTML += `<br><br>`;a
Lisa.insertAdjacentHTML('beforeend', `<br><br>`);