I have a little problem!
I need to retrieve the value of score++ outside of its function.
For example, if the user clicks "button" 5 times I want the score result to be 5.
How to use this result in a new function?
I searched without finding a solution.
let score = 0;
let clickHere = document.getElementById("clickHere");
clickHere.addEventListener("click", () => {
score++;
// console.log(score)
// Add 1 when I click
});
console.log(score);
// Score = 0
#clickHere {
padding: 20px;
background-color: #000000;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
}
<div id="clickHere">Click here !</div>
:).
The console log outside the callback is executed only once. For every click, the event listener callback is executed. You can do all changes related to the variable there.
let score = 0;
let clickHere = document.getElementById("clickHere");
let counterDiv = document.getElementById("counter");
clickHere.addEventListener("click", () => {
score++;
counterDiv.innerText = "Counter: " + score;
// console.log(score)
// Add 1 when I click
});
console.log(score); // --> Already executed due to asynchronous nature
// Score = 0
#clickHere {
padding: 20px;
background-color: #000000;
color: #ffffff;
font-weight: bold;
text-transform: uppercase;
display: inline-block;
}
<div id="clickHere">Click here !</div>
<h4 id="counter">Counter: 0</h4>