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

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

• javascript
• html
• variables
• dom

Share Improve this question Follow edited Jun 7, 2020 at 17:20 Sebastian Simon 19.6k88 gold badges6161 silver badges8484 bronze badges asked Sep 24, 2019 at 10:23 SamuelSamuel 10311 gold badge33 silver badges1111 bronze badges 1

• One key point to know: when you assign a variable, it never changes its value, unless you reassign it. But strings (and numbers, booleans, null, undefined, symbols, and bigints) are primitive values, and all these are immutable, so a string never magically changes within a variable, if its “original reference” changes value someplace else. Objects (and functions) however are not primitives; their “value” is a fixed reference, which also never changes, but this reference is like an address that leads to other values — and this “referencing to other values” can change. – Sebastian Simon Commented Jun 7, 2020 at 17:33

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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