¿Por qué el valor de mi entrada siempre está vacío si lo almaceno en una variable?
Estoy intentando obtener la valuepropiedad de mi <input>campo para poder usarla más tarde para obtener datos de una URL de API específica.
El problema es que mi <input>valor siempre está vacío sin importar lo que escriba.
Intenté usar document.querySelector()y document.getElementById(); ambos dan el mismo resultado.
const searchBtn = document.querySelector("#searchBtn");
//const inpuValue = document.querySelector("#inputField").value;
const inputValue = (document.getElementById("inputField")).value;
const testing = () => alert(inputValue);
searchBtn.addEventListener("click", testing);
La alerta simplemente aparece en blanco, pero no aparece si especifico un valor en el campo HTML. Entonces supongo que estoy activando el botón y <input>el campo correctos. (Lo uso alertporque ninguno de mis navegadores me muestra el console.logen la consola).
El testingcontrolador de funciones se llama cada vez que se hace clic en el botón.
Por el contrario, la inputValuevariable se evalúa solo una vez cuando el código se ejecuta por primera vez, en la evaluación inicial del script durante la carga de la página, y nunca más. El valor de entrada se almacena dentro de la variable y nunca se actualiza después de eso. (Las cadenas son inmutables en JavaScript: una vez que almacena una cadena en una variable, no cambiará a menos que asigne esa variable a otro valor).
Si desea actualizar el valor cada vez que hace clic en el botón, debe consultar el elemento cada vez:
const testing = () => {
const inputValue = document.getElementById("inputField").value;
alert(inputValue);
}
O puedes mantener solo una referencia al elemento y consultar la valuepropiedad cada vez:
const inputElement = document.getElementById("inputField");
const testing = () => alert(inputElement.value);
