增加函数内的全局变量

Question

Can someone tell me why the global variable is not affecting? the local variable in function works. But not outside the function.

let increment = 0;
button.addEventListener("click", function(){
    increment++;
    console.log(increment); // Works!


});

console.log(increment); // Not incrementing

Answer 1

This is because addEventListener works asynchronously. The console.log statement at the last line of your code gets executed before the callback of your event listener is run and thus the value of your increment variabe is still 0.

Answer 2

This version might help demonstrate what's happening:

 let increment = 0; const button = document.getElementById('foo'); const output = document.getElementById('output'); const updateOutput = function() { output.innerHTML = `Value is ${increment} at ${new Date().toString().substring(16, 24)}`; } button.addEventListener("click", function(){ increment++; updateOutput(); }); setInterval(updateOutput, 1000) console.log(`External call, value: ${increment}`);

 <div id="output"></div> <hr/> <div><button id="foo">Increment</button></div>

Choose "Run code snippet" to see it in action. It tells you the current value of the (global) increment variable every second. It also updates when you click the button and thereby increase the value. Both functions are accessing the same global increment variable.