There is a need to write a simple counter (as goods in the basket online store + - the value of the input). I always did something like this and there were no problems, everything worked (I simplified the essence):

var count = 1; input.value = count; next.addEventListener('click', function(){ if(count < 4) { count++; input.value = count; } }); prev.addEventListener('click', function() { if (count > 1) { count--; input.value = count; } });

It counts from 1 to 4.

But now you need to insert the counter into the modal window, which will be called by clicking on different elements. The counter will be initialized when the window appears (put the counter in the function). At first glance, everything works fine, everything switches, when you close the window and call another window, the field value is set to 1 (as indicated in the 1st line), BUT if you press the back button immediately after the counter appears the second ++ time (if the previous window was is closed on a number more than 1), then it starts counting back from the value on which the past window was closed, ignoring if(count>1) , as if count keeps the value from the previous window, although in theory I reassigned it to 1 on the first line.

I would like to understand what is the reason, what principle does it work and how best to solve this problem?

  • The issue was resolved by replacing addEventListener with .onclick. Apparently some kind of feature of his work. But the first part of the question "... I would like to understand what the reason is, by what principle it works ..." is still relevant. - Gonzo
  • It is better to describe the question, since by providing a simplified version, you will receive an answer to the simplified version, and not to the one you need. - ThisMan

2 answers 2

The problem is in the way an event handler is assigned. AddEventListener () can add multiple handlers to a single event. When the counter is re-initialized, another similar handler is added to the click event, disrupting the normal operation of the counter.

    You count is a global variable and, accordingly, it retains its previous value. Output - make it local to each function.

     next.addEventListener('click', function(){ var count = input.value; if(count < 4) { count++; input.value = count; } }); prev.addEventListener('click', function() { var count = input.value; if (count > 1) { count--; input.value = count; } });
    • She is not global. This is a shortened piece of code from the initCount () function, which is called when a modal window is called. The problem was solved simply by changing addEventListener to a regular .onclick, without touching this variable. But why this happened, I still do not understand. - Gonzo
    • @Pupkin In your code, it is global. We are discussing your code, not some hypothetical abstraction - Anton Shchyrov
    • In the description, I indicated how and from where this code is called. And, accordingly, that this is not a global variable. - Gonzo