How to change variable value when click function is called?

Question

I want to change the check value from false to true whenever I click on the a link. So far I've not found any suggestions on how to do this

<a href="#" class="click"></a>
<a href="#" class="click">Click Me</a>

let check = false;

document.querySelectorAll('.click').forEach(item => {
  item.addEventListener('click', event => {
    check = true;
  });
});

console.log(check);

Use the onClick event https://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_onclick https://stackoverflow.com/a/14867603/495157 — JGFMK, Dec 24 '19 at 16:07
This works as it is - move the `console.log(check)` inside the eventListener — Shiny, Dec 24 '19 at 16:09
@David your `console.log(check)` gets executed right after you define your click event. It's not being called after you click or any other time after. If you look at your `check` variable *after* you've clicked, you'll find it's been set. You could add another click link that checks the value and shows it to the user in HTML or an alert if you want to test it out — lurker, Dec 24 '19 at 16:12
@David I've done this for you in my answer - The button with the text 'Console.log(check)' console.logs the value of check from the global scope — Shiny, Dec 24 '19 at 16:20
@David you already know how to write the code. You've obviously written code to set the variable on a click. (I assume you wrote it, did you?) You just write a little bit of similar code that reads the variable. You can call `alert` for a quick check to the user. — lurker, Dec 24 '19 at 16:23

score 1 · Answer 1 · answered Dec 24 '19 at 16:14

Your console.log() is being executed after you assign the onclick event, not after it is called - So the only thing you log is the value of checked at the very beginning of your script

I've moved the console.log() inside the function, and also added a separate button so you can confirm that the value of check has changed in the global scope

let check = false;

document.querySelectorAll('.click').forEach((item) => {
  item.addEventListener('click', (event) => {
   check = true;
   
   // Check value has changed
   console.log(check);
  });
});

<a href="#" class="click"></a>
<a href="#" class="click">Click Me</a>

<br>
<button style="margin-top: 10px" onclick="console.log(check);">Console.log(check)</button>

McMuffinDK · Answer 2 · 2019-12-24T16:19:38.190

0

Your solution already works, you just have to move your console.log(check) to print the new value

let check = false;

document.querySelectorAll('.click').forEach(item => {
  item.addEventListener('click', event => {

   check = true;
   // print the new value
   console.log(check);
  });
});


console.log(check);

<a href="#" class="click"></a>
<a href="#" class="click">Click Me</a>

edited Dec 24 '19 at 16:19

answered Dec 24 '19 at 16:12

McMuffinDK

431
3
13

How to change variable value when click function is called?

2 Answers2