Why is the value of my input always empty if I store it in a variable?

问题

I’m trying to get the value property from my <input> field so I can later use it to fetch data from a specific API URL.

The problem is that my <input> value is always empty no matter what I type in it.

I tried to use document.querySelector() and document.getElementById(); both yield the same result.

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);

The alert just appears blank, but it doesn’t if I specify a value in the HTML field. So I guess I’m triggering the right button and <input> field. (I use alert because none of my browsers show me the console.log in the console).

回答1:

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);

来源：https://stackoverflow.com/questions/58078160/why-is-the-value-of-my-input-always-empty-if-i-store-it-in-a-variable

标签

javascript

html

variables

dom