我想将一个值推送到一个数组然后发出警报，但什么都没有显示？

Question

I wrote this block code to get some value and alert that. but in alert window nothing is shown. I realized that I can move the "inputValue" variable into the function to fix that problem, but I don't know why?

JavaScript:

let array = [];
let textInput = document.getElementById('textInput');
let button = document.getElementById('button'); 

let inputValue = textInput.value;

function push(){
    alert(inputValue);
}


button.addEventListener('click' , push);

HTML Code section:

    <input type="text" id="textInput">
    <input type="button" id="button" value="push to array">

Answer 1

It is because when the site is loaded then it will grab the input fields value and at this time it is empty.

You have to grab the input value when the button gets clicked. So put the part

let inputValue = textInput.value;

Inside your push() method which gets invoked on button click and it will work. The snippet below demonstrates it.

 let array = []; let textInput = document.getElementById('textInput'); let button = document.getElementById('button'); function push() { let inputValue = textInput.value; alert(inputValue); } button.addEventListener('click', push);

 <input type="text" id="textInput"> <input type="button" id="button" value="push to array">

Answer 2

You could re-write your snippet like in the following example. textInput should be a const and inside push function just use textInput.value .

 let array = []; const textInput = document.getElementById('textInput'); const button = document.getElementById('button'); function push() { alert(textInput.value); } button.addEventListener('click', push);

 <input type="text" id="textInput"> <input type="button" id="button" value="push to array">