Encuentro que la manipulación de DOM es complicada. He escrito una función que usa el método de filtro en una matriz con números que son divisibles por dos.
La función evenNums funciona. Quiero usar el método push() para enviar números desde el campo de texto de entrada a la matriz y mostrar el resultado de la función evenNums en la página.
HTML
<!DOCTYPE html> <html> <head> </head> <body> <label for="text">Enter Text</label> <input id="myText" type="text" /> <input type="radio" /> <label for="function">Function 1</label> <input type="radio" /> <label for="function">Function 2</label> <button id="btn">Click Me</button> <div id="result"></div> <script src="array.js"></script> </body> </html>ignore los botones de opción. Este es mi JavaScript
const inputBtn = document.getElementById("btn") const myText = document.getElementById("myText") const result = document.getElementById("result") //function 1 filter method on array. const nums = [1,2,3]; const answer = nums.filter(evenNums); function evenNums(nums) { if (nums%2 == 0) { return nums } } result.innerHTML = answer; console.log(nums) // original array console.log(answer) // array using filter method //How do I push a value from the user to the array? inputBtn.addEventListener ("click", function() { nums.push(myText.value); myText.value =''; evenNums(nums); });Esto es lo lejos que tengo. ¿Cómo envío un valor del usuario a la matriz y lo muestro en la página? ¿Estoy cerca?
¡Gracias por toda tu ayuda!
Lo que está haciendo es casi correcto, solo asegúrese de llamar al filter y configurar el contenido del textcontent al hacer clic en el botón. Además, el value es una cadena, tendrá que parseInt() para hacer el cálculo par/impar. También es más seguro usar textcontent en lugar de innerHTML .
const inputBtn = document.getElementById("btn") const myText = document.getElementById("myText") const result = document.getElementById("result") const nums = [1, 2, 3]; inputBtn.addEventListener("click", function() { nums.push(parseInt(myText.value)); myText.value = ''; const answer = nums.filter(evenNums); function evenNums(nums) { if (nums % 2 == 0) { return nums } } result.textContent = answer; }); <label for="text">Enter Text</label> <input id="myText" type="text" /> <button id="btn">Click Me</button> <div id="result"></div> Solo una nota al margen: filter() espera un valor booleano como valor de return , la razón por la que su filtro funciona es porque return nums que se ven como verdaderos .
Esto debería ser mejor.
const nums = [1, 2, 3]; const answer = nums.filter(evenNums); function evenNums(nums) { if (nums % 2 == 0) { return true; } } console.log(answer);Podrías simplificar tu filtro a.
const nums = [1,2,3]; const answer = nums.filter(n => n % 2 === 0); console.log(answer); Porque ( x === y ) devuelve un valor booleano.
La respuesta corta sería.
const inputBtn = document.getElementById("btn") const myText = document.getElementById("myText") const result = document.getElementById("result") const nums = [1, 2, 3]; inputBtn.addEventListener("click", function() { nums.push(parseInt(myText.value)); myText.value = ''; result.textContent = nums.filter(n => n % 2 === 0); }); <label for="text">Enter Text</label> <input id="myText" type="text" /> <button id="btn">Click Me</button> <div id="result"></div>Parece que estás en el camino correcto. Después de enviar la entrada del usuario a la matriz, puede mostrar el resultado de la matriz filtrada en la página configurando el atributo innerHTML .
Simplemente llamar a la función por sí solo no hará nada por usted.
document.getElementById("result").innerHTML = nums.filter(evenNums);