2

I have an append button which appends endlessly if you click it endlessly. Lets say i want this button to do this 10 times.

Let me tell you in fantasy code :p what i was thinking so that i can learn from my mistakes; ( i know its wrong but hey im learning)

thismany = 1;

appendbutton.onClick = "thismany = +1";
if{ thismany = <9}

appendbutton.onClick = disabled

thanks in advance

pyfunc
  • 65,343
  • 15
  • 148
  • 136
Opoe
  • 1,337
  • 8
  • 30
  • 56
  • 1
    Tags play a very important role in getting attention of other SO answerers. If you are asking a question on Javascript, include that. Tags like onclick, append, limit are valid for other languages too. – pyfunc Dec 07 '10 at 18:51
  • @pyfunc: Sorry i thought i did put Javascript as a tag! Blame's on me – Opoe Dec 07 '10 at 18:57

3 Answers3

2
(function(){
    var count = 1;
    document.getElementById("the_node_id").onclick = function(){
        if(count > 10){
            return;
        }
        do_stuff();
        count ++;
    };
})()

UPDATE:

var count = 1;
addEvent(append, "click", function(/* someargument */){ 
    if(count > 10){
        return;
    }
    // if you need arguments that are passed to the function,
    // you can add them to the anonymous one and pass them 
    // to appendFunction
    appendFunction(/* someargument */);
    count++; 
});
Gabi Purcaru
  • 30,940
  • 9
  • 79
  • 95
  • thank you, i have this code though for the button addEvent(append, "click", appendFunction); Can i add this function to that as well? – Opoe Dec 07 '10 at 19:33
  • @Opoe `count` needs to be incremented in the same scope. I will update the code to give an example. – Gabi Purcaru Dec 07 '10 at 19:37
  • wow thank you very much! I have more "var count =" 's in my code, could this be a reason that it isnt workin yet? – Opoe Dec 07 '10 at 19:51
  • 1
    @Opoe maybe, change the name of the variable. You should always use different names if they are in the same scope. Also, I would recommend reading more about scopes & closures, they are _awesome_, but you need to have a grasp of them first: http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/ – Gabi Purcaru Dec 07 '10 at 19:55
  • Wow thank you so so much! Realy helped me out here and i'll read the article interesting! Thank you!! – Opoe Dec 07 '10 at 20:10
1

Using your variable names:

var thismany = 0;

appendbutton.onclick = function() {
  if (thismany++ < 10) {
    // append things
  }
};

Variable encapsulated:

appendbutton.onclick = function() {
  if (this.count == undefined) {
    this.count = 0;
  }

  if (this.count++ < 10) {
    // append things
  }
};
Orbling
  • 20,413
  • 3
  • 53
  • 64
  • thank you! May i ask what the benefitsof an encapsulated variable are? :) – Opoe Dec 07 '10 at 19:35
  • 1
    Well, the first method uses the variable in the outer scope of the function within itself, the second uses the fact that all functions in Javascript are also objects and therefore are able to have properties. The variable is only relevant within the code, so using an external variable is undesirable in this case. There are instances where it would be better to use the external variable, if you want a reset for example. – Orbling Dec 07 '10 at 20:08
1

This is straight javascript. You might also consider looking into a framework such as jQuery to make it easier for you.

This assumes your HTML for the button has id="appendButton" as an attribute.

var count = 0;
document.getElementById("appendButton").onClick = function(e) {
     if( count >= 10 ) {
          return false;
     }
     else {
          count ++;
          document.getElementById("id_of_thing_you_append_to").innerHTML += "Whatever you're appending";
     }
}
Cfreak
  • 19,191
  • 6
  • 49
  • 60