在 Javascript 中单击按钮后更改变量值

Question

What I want to do is to be able to change the value of val once btn-here has been clicked. I have the following code but it is not working. what am I missing?

    var btn = document.getElementById('btn-here');
    var val = document.getElementById('text-here').value;
    btn.addEventListener("click", () => {
    var val = '100';
    });

Answer 1

If you just want to change the value of your variable, you don't need to declare that again. So your code will look something like:

var btn = document.getElementById('btn-here');
var val = document.getElementById('text-here').value;
btn.addEventListener("click", () => {
   val = '100';
});

Answer 2

The below code snippet should be helpful in clarifying why the code in the question does not achieve it's expected objective as well as provide an alternative that works.

Code Snippet

 var btn = document.getElementById('btn-here'); // in below, one is directly accessing the "value" var val = document.getElementById('text-here').value; btn.addEventListener("click", () => { // var val = '100'; // even if one removes "var", the value will still val = '100'; // not be assigned to element "text-here" console.log('val is now ', val); console.log('but, "text-here" element value remains: ', document.getElementById('text-here').value); }); // below is one way to achieve the expected objective // it uses no variables & directly manipulates the HTML elements document.getElementById("btn-here-works").addEventListener('click', () => { document.getElementById("text-here").value = '100'; }); // below is another alternative which uses variables // which resembles closely what the OP has described in their question // declare btn to hold the element with id "btn-here" const btn2 = document.getElementById('btn-here2'); // declare userInput to hold "text-here" (which is <input />) const userInput = document.getElementById('text-here2'); // add click event listner where userInput.value is assigned a value 100 btn2.addEventListener("click", () => { userInput.value = '100'; });

 <button id="btn-here">button</button> <input id="text-here" /> <button id="btn-here-works">button works</button> <br/><br/> <button id="btn-here2">button-2</button> <input id="text-here2" />

Explanation

• It is my understanding that var val = document.getElementById('text-here').value; provides a read-only access to the value prop of the HTML-element
• Hence when assigning 100 to val , the HTML-element remains unaffected
• Modifying var val = '100'; to val = 100 does not achieve what OP expects
• Instead, if one accesses the HTML-element (& not it's value prop) by using a variable such as userInput
• Then, one is able to assign a value to userInput.value which then changes the value prop of the HTML element.