How to use a global variable within a function?

[Atman Atos]

If I move the variable inside of the function, the code executes but once I move it outside of the function it doesn't. Why?

<input id="pp" type=text></input>
<button id="button">Start</button>

 const pp = document.querySelector("input").value;
ks = () => {
  console.log(pp);
}
document.querySelector("#button").addEventListener('click', ks)

 

[Padonak]

id="pp"

const pp

 

[Atman Atos]

I do not get your quote

 

[c1lonewolf]

he's trying to tell you that it should be name="pp" in your form element instead of using id="pp".

 

[Atman Atos]

he's trying to tell you that it should be name="pp" in your form element instead of using id="pp".

Alright

 

[Kuncode]

When you declare the variable pp outside of the function, it only captures the value of the input element at the time it is declared. It does not update when the value of the input element changes, so when you click the button and run the ks function, it will always log the same initial value of pp.

If you move the declaration of pp inside the function, it will capture the current value of the input element each time the function is executed, so the function will log the updated value of the input element each time the button is clicked.