How to check, how often have dynamically created buttons been clicked, individually and in total?-CodePudding

I created a loop with buttons in it. I also created an eventListener that keeps a count for every button. I want something to happen when all buttons have been presses at least 3 times, so I created an if statement that checks if the count is 3 and adds 1 to another count, but the other count stays on 1 even if multiple buttons have been pressed 3 times.

for (let i = 0; i < 7; i  ) {
  let btn = document.createElement('button');

  btn.classList.add('buttons');
  btn.id = 'button'   i;

  document.getElementById('box').appendChild(btn);

  let count = 0;
  let count2 = 0;

  btn.addEventListener('click', () => {
    count  ;
    console.log(count);

    if (count === 3) {
      console.log('3');

      count2  ;
      console.log(count2);
    } else {

      console.log('not 3');
    }
  });
}

#box button { min-width: 20px; min-height: 20px; }
.as-console-wrapper { max-height: 87%!important; }
body { margin: 0; }

<div  id="box">
</div>

So the count variable works fine, and when 1 button has been clicked 3 times the count2 variable changes to 1, but it stays on 1 and I can't seem to find out why. At the end count2 should be 7, because there are 7 buttons.

CodePudding user response：

as Vladimir implied in the comments its a scoping problem.

The variable count is only declared inside the event listener, so later on when you press different button your code does count for a different count variable.

To solve this declare var count instead of let count - that will make it global.

Or declare the count variable before the for loop.

BTW: make sure to stop updating count as it gets to 3, since it wouldn't update count2 if it gets to 4 or above

CodePudding user response：

In addition to all the comments which already did point to the OP's problem I suggest a different approach based on storing/updating individual button-counts within a Map-instance.

With introducing event-delegation on top one would get rid of multiple on the fly (for each dynamically created button) applied event handlers which forces the approach to deal with different counter scopes (handler scope and the for block scope).

There will be exactly a single handler subscribed once to a single parent-node's 'click'-event. This handler keeps track of and handles the various click-count states by looking up a buttons individual click-count.

function createButton(id) {
  let elmNode = document.createElement('button');

  elmNode.classList.add('buttons');
  elmNode.id = `button${ id }`;

  return elmNode;
}
function main() {

  // keeps track of and handles the various click count states.
  function handleButtonClick({ target }) {
    const btnNode = target.closest('button');

    // update a single buttons click count total.
    const buttonClickTotal = clickCountStorage.get(btnNode)   1;
    clickCountStorage.set(btnNode, buttonClickTotal);

    const clickCountList =  Array
      .from(
        clickCountStorage.values()
      );
    // calculate click count total of all buttons.
    const allButtonsClickTotal = clickCountList
      .reduce((total, count) => total   count, 0);

    // check whether the OP's each button minimum 3 times click applies.
    const isEveryButtonHasBeenClickedAtLeastThreeTimes = clickCountList
      .every(count => count >= 3);

    console.log({
      buttonClickTotal,
      allButtonsClickTotal,
      isEveryButtonHasBeenClickedAtLeastThreeTimes,
    });
  }
  const clickCountStorage = new Map;

  const root = document.querySelector('#box');
  // make use of event delegation ...
  // - a single eventhandler subscribed once to
  //   a single parent node's 'click' event.
  root.addEventListener('click', handleButtonClick)

  for (let elmNode, i = 0; i < 7; i  ) {
    elmNode = createButton(i);

    // establish a new button reference related click count.
    clickCountStorage.set(elmNode, 0);

    root.appendChild(elmNode);
  }
} 
main();

#box button { min-width: 20px; min-height: 20px; }
.as-console-wrapper { max-height: 87%!important; }
body { margin: 0; }

<div  id="box">
</div>