addEventListener - counting clicks

JavaScript
1

Hi!

here is my event listener

Screenshot 2022-09-19 185927
Screenshot 2022-09-19 1859271278×407 37.3 KB

for some reason it counts each click two times. Despite the fact that I’ve clicked for two times the console has 1, 2, 3, 4 logged. That’s not good because I want to use modulus of this count as a trigger for switching dark theme on and off.

The second question is that the global variable themeChangeClicksCount which is declared at the beginning of the script, is not updated even if I ad ad return at the end of themeChangeClicksCounter function. Like this (I’ve clicked the toggle and it still says 0):

Screenshot 2022-09-19 190825
Screenshot 2022-09-19 1908251057×243 25 KB

What’s the cause behind this and how do I make it updatable?

2

You need to use assignment (using the equal operator) to make it change.

Not sure about the other question.

Maybe posting a link to live code may help give further insight.

3

Screenshot 2022-09-19 192459
Screenshot 2022-09-19 1924591190×411 50.1 KB

like this? Same results

4

Sorry I meant assign the returned value (outside the function).

How did you declare the global variable?

5

here is the code with the variable declared and assigned outside the function. Still doesn’t count.

let themeChangeClicksCount = 0;
function themeChangeClicksCounter() {
  themeChangeClicksCount = themeChangeClicksCount + 1;
  return themeChangeClicksCount;
}
themeChangeClicksCount = themeChangeClicksCount;
console.log(themeChangeClicksCount);
6

You need to set the variable to the return value of the function. Not to itself.

7

I think another option is to use window.themeChangeClickCounts inside the function to make it change .

Edit: never mind. The variables declared with let do not belong to the window object.

I think sharing your live code is probably a good idea so we can see the whole thing working.

8

which solution for sharing code do you recommend?

9

codepen or repl.it (or any other)

10

here is my codepen showing some simple js to count up

edit: i think the reason your global counter is not showing as incremented is because you are logging it too early. (you log it before any clicks happen right?)

11

not sure that I’m sharing it right, but take a look

A Pen by prxsd (codepen.io)

12

I can’t see anything useful right now in the pen. The images are broken, and I’m not sure what to click on to test.
I think you should take a look at my last comment…

13

Not sure why you would use a number increment for a theme switcher?

I would expect it to be either a boolean or a string value. Like isDarkMode = true or theme = 'dark'.

It is tempting to go with the boolean because it is easy to switch the value but the string value can be easier to reason about. Boolean logic can get confusing surprisingly quickly even for simple things.

If you want to log the variable being changed by an event handler, put the log inside the handler.

Example 
const toggle = document.getElementById('toggle')
let isDarkMode = false;

toggle.addEventListener("change", function () {
  isDarkMode = !isDarkMode;
  console.log(isDarkMode)
});

const toggle = document.getElementById('toggle')
let theme = 'light';

toggle.addEventListener("change", function () {
  theme = theme === 'light' ? 'dark' : 'light'
  console.log(theme)
});
15

@lasjorg I’ve figured it out, - it works but only for one cycle. With the click on the toggle switches to the dark theme, the next click one brings white back, and after that it stops responding

let theme = "light";
toggle.addEventListener("change", function () {
  theme = theme === "light" ? applyDarkTheme() : applyLightTheme();
});
16

We need to see all the code. Update your Codepen so we can see what you have.

17

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.