CODEWITHSUNDEEP
javascript
Scott Miller
Scott Miller

Reputation: 57

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

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;
    }
}

Upvotes: 0

Views: 60

Answers (4)

mevans
mevans

Reputation: 316

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

});

Upvotes: 0

ContinuousLoad
ContinuousLoad

Reputation: 4922

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>

Upvotes: 0

epascarello
epascarello

Reputation: 207527

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>

Upvotes: 2

James
James

Reputation: 22247

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
}

Upvotes: 1

Related Questions