Why is the value of my input always empty if I store it in a variable?
The testing
function handler is called every time the button is clicked.
In contrast, the inputValue
variable is evaluated only once when the code is firstly executed, at initial script evaluation during page load, and never again. The input value gets stored inside the variable and it never gets updated after that. (Strings are immutable in JavaScript: once you store a string in a variable, it won’t change unless you assign that variable to another value.)
If you want to refresh the value every time you click the button, you have to query the element every time:
const testing = () => {
const inputValue = document.getElementById("inputField").value;
alert(inputValue);
}
Or you can keep just a reference to the element and query the value
property every time:
const inputElement = document.getElementById("inputField");
const testing = () => alert(inputElement.value);