With javascript, how do you simply express a number of iterations?

Question

For example, say I want a block of code to run after a certain event occurs a certain amount of times (let's suppose a button is pressed in the following example). Would I use something similar to an if statement such as the following:

if( //certain event occurs: document.getElementById('btn').clicked == true 5 times 
) {
    //block of code to run if button is clicked 5 times: output in p element
    }

<button id="btn" type="button">click</button>
<p></p>

If there's a more practical way than an if statement, I'd like know, please, and thanks. However, if an if statement is the way to go (unless of course there's a more practical method), how would you have a block of code run after a certain event occurs per specified increment of times? Utilizing the html elemenets above:

var alpha = 0;
function addition() {
    alpha = alpha + 1;
    return alpha;
}

document.getElementById('btn').addEventListener('click', 'get_addition');

function get_addition() {
    document.getElementsByTagName('P')[0].innerHTML = addition();
    if( //document.getElementById('btn').clicked == true per 5 times 
) {
        //block of code to run per 5 button clicks outputted in p element;
        //then return to outputting values in p element rendered by addition() until next 5th iteration;
    }
}

Possible duplicate of [Javascript show div after a few clicks](https://stackoverflow.com/questions/37789293/javascript-show-div-after-a-few-clicks) — Sam Hanley, Oct 26 '17 at 16:20

score 2 · Answer 1 · answered Oct 26 '17 at 16:24

2

You can use data attributes with modulus operator to keep track of the clicks.

function get_addition () {
   this.dataset.clicked = this.dataset.clicked || 0
   this.dataset.clicked++
   if (this.dataset.clicked%5===0) {
      this.classList.add("green");
   } else {
      this.classList.remove("green");
   }
}

document.getElementById('btn').addEventListener('click', get_addition);

.green {
   background-color: green;
}

<button id="btn">Click</button>

answered Oct 26 '17 at 16:24

epascarello

204,599
20
195
236

I like this solution much more than my answer. +1 for using data attributes -- a lot less messy than a bunch of globals. – ContinuousLoad Oct 26 '17 at 16:27
Clever use of dataset. +1. As `this.dataset.clicked` is referenced four times you could even do `var d = this.dataset;` and then go with `d.clicked`. Would save a few tiny bytes :o) – agrm Oct 26 '17 at 16:34
I just typed it quick, could be a lot cleaner – epascarello Oct 26 '17 at 16:35
Thank you sir for your input. I'm still quite very new to js so there are a lot of things in this code for me to research and learn such as .dataset and .classList. – Scott Miller Oct 26 '17 at 20:21

score 1 · Answer 2 · answered Oct 26 '17 at 16:21

You have a global variable, alpha, which counts how many times the button was clicked. Seems like you can just test whether alpha is a multiple of 5 and execute your special code then (within your get_addition function, after incrementing alpha).

if (alpha % 5 == 0) {
  alert("5 clicks");
} else {
  // regular code
}

mevans · Answer 3 · 2017-10-26T16:31:13.257

0

The best way is to track the number of clicks, increment each time. When you reach 5 you can execute your code & reset the counter.

var counter = 0;
document.getElementById('btn').addEventListener('click', function(){

    counter ++;
    if(counter == 5)
    {
        counter = 0;
        //this code executed after 5 clicks
    }
    //this code executed every click

});

edited Oct 26 '17 at 16:31

answered Oct 26 '17 at 16:24

mevans

196
2
9

You should remove the quotes enclosing the function name in your `addEventListener` method – agrm Oct 26 '17 at 16:27
Yeah . it was just copied straight from the OP's example. Thanks & updated :) – mevans Oct 26 '17 at 16:30

score 0 · Answer 4 · answered Oct 26 '17 at 16:25

This answer is pretty much the same as @James', but I have provided a self-contained snippet. The idea is the same -- increment a global, and use modulus to check for multiples.

let count = 0;

let btn = document.getElementById("b");
btn.addEventListener("click", function() {
  count++;
  if (count % 3 == 0) {
    alert("You see this once every three clicks");
  }
});

<button id="b">Click me 3 times</button>

With javascript, how do you simply express a number of iterations?

4 Answers4