CODEWITHSUNDEEP
javascript
GerryofTrivia
GerryofTrivia

Reputation: 430

limit function to run after spesifict time

var change= document.getElementById("change");
var color= document.getElementById("color");
var result=document.getElementById("result");

function changecolor(){
    change.addEventListener("click",randomColor());
}
function randomColor(){
  for(var i=0; i<1000; i++){
    var randomColor ='#'+Math.random().toString(16).substr(2,6);
    color.style.background=randomColor;
    result.innerHTML="current color is"+randomColor;
  }
}

https://jsfiddle.net/z9yu3tjm/

i have function like that to generate random color. each click will genereate random color. i want to show an alert if the function run 5 times. and the function will stop (cant be click). how to do that

Upvotes: 0

Views: 40

Answers (4)

Abdennour TOUMI
Abdennour TOUMI

Reputation: 93163

For an architecture's concern , We recommend to not modify randomColor function, however, to add another function which monitors randomColor calls. 

function changecolor(){
    change.addEventListener("click",monitor);
}

randomColor.calls = 0; 

function monitor () {
  randomColor.calls ++;  
  randomColor.calls <=5 && randomColor(...arguments);
}

Just for code elegance :)

Upvotes: 0

Ajay Narain Mathur
Ajay Narain Mathur

Reputation: 5466

Keep a counter to keep trank of number of clicks and once it is over the limit remove the on click attribute so the event is not fired anymore.

use change.removeAttribute('onclick'); to remove click event.

Example Snippet:

var change = document.getElementById("change");
var color = document.getElementById("color");
var result = document.getElementById("result");
var max_number_times = 5;
var number_of_times = 0;

function changecolor() {
  change.addEventListener("click", randomColor());
}

function randomColor() {
  if (number_of_times < max_number_times) {
    number_of_times++;
    for (var i = 0; i < 1000; i++) {
      var randomColor = '#' + Math.random().toString(16).substr(2, 6);
      color.style.background = randomColor;
      result.innerHTML = "current color is" + randomColor;
    }
  } else {
    alert("5 times done")
    change.removeAttribute('onclick');
  }
}
<button id="change" onclick="changecolor()">change color</button>
<section id="color">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum, ullam ex totam dolorem cupiditate! Velit autem, obcaecati magni molestiae architecto.</p>
  <p id="result"></p>
</section>

Upvotes: 0

Shoaib Konnur
Shoaib Konnur

Reputation: 459

Only you have to use is counter variable. https://jsfiddle.net/z9yu3tjm/1/ I have updated your code and here is JS code.

var change= document.getElementById("change");
var color= document.getElementById("color");
var result=document.getElementById("result");

function changecolor(){
    change.addEventListener("click",randomColor());
}
var i=0;
function randomColor(){
        if(i<5){
    i++;
    var randomColor ='#'+Math.random().toString(16).substr(2,6);
    color.style.background=randomColor;
    result.innerHTML="current color is"+randomColor;
    }else{
    alert('5 times run...');
    }
}

Upvotes: 0

squiroid
squiroid

Reputation: 14017

Maintain a global variable for example count

var count = 1;

function randomColor(){ 
   if(count >5){ 
      return;
   }  
  for(var i=0; i<1000; i++){
    var randomColor ='#'+Math.random().toString(16).substr(2,6);
    color.style.background=randomColor;
    result.innerHTML="current color is"+randomColor;
  }
  count ++;


}

Fiddle: https://jsfiddle.net/qbevnvjj/

Upvotes: 1

Related Questions