Run JS function once

Question

I have this JS function:

<script type="text/javascript">
 var counter = <?php echo $oak; ?>;
 function myFunction() {
 counter++;
 document.getElementById('countervalue').innerHTML = counter;
 }
 </script>

This function is triggered once an image is clicked on. My problem is that I want it to only trigger the first time the image is pressed. Any ideas? Thanks in advance.

html code:

<div class="cut_oak_tree">
 <img src="http://www.pbpixels.com/x/images/oak.png" onclick="loadXMLDoc(this.outerHTML), myFunction()" /> <!--DO NOT CHANGE SRC -->
 <br>
 <img src="http://www.pbpixels.com/x/images/oak.png " onclick="loadXMLDoc(this.outerHTML), myFunction()" /> <!--DO NOT CHANGE SRC -->
 <img src="http://www.pbpixels.com/x/images/oak.png " onclick="loadXMLDoc(this.outerHTML), myFunction()" /> <!--DO NOT CHANGE SRC -->
 </div>

• DontVoteMeDown: How you set this to be called on image click? Show us this code.
• Teepeemm: A boolean to keep track of whether it's been clicked? Remove the click handler from the image?
• user3287771: Edited html code and good idea^
• Ivaylo Strandjev: @user3287771 instead of removing the click handler you can also edit the function body to do nothing if the flag is true

Answer 1

Try this code:

Add this on the event call(onclick="myFunction(this)") then your function will looks like function myFunction(img) {. Then inside it remove its click handler:

img.onclick = null;

Final result is:

function myFunction(img) {
 counter++;
 document.getElementById('countervalue').innerHTML = counter;
 img.onclick = null;
}

And an image example:

<img src="http://www.pbpixels.com/x/images/oak.png " onclick="myFunction(this)" />

I wouldn't use a boolean like @SLoW suggested because that way you won't be able to know which image was already clicked. To do that you'll have to use an object and store each images id - or something like this - and its clicked state.

• user3287771: Nice, it almost worked, my problem is that if you press the image fast enough, it will still count 1 up before the image is removed :o So basically you can get like 5 clicks out of the same tree
• DontVoteMeDown: @user3287771 but there's nothing on your post talking about removing the image.. so I can't say nothing about it.
• snollygolly: Try moving img.onclick.null above counter++ and see if that helps.
• user3287771: Thanks @SLoW that did the job and thanks DontVoteMeDown!

Answer 2

Add a flag

function myFunction() {
 if(!myFunction.invoked){
 counter++;
 document.getElementById('countervalue').innerHTML = counter;
 myFunction.invoked = true;
 }
}
myFunction.invoked = false;

Answer 3

Remove the onclick handler, by sending the element you clicked to the function:

<img src="http://www.pbpixels.com/x/images/oak.png " onclick="loadXMLDoc(this.outerHTML); myFunction(this)" />
function myFunction(elm) {
 elm.onclick = null; // Remove the onclick
 counter++;
 document.getElementById('countervalue').innerHTML = counter;
} 

Answer 4

if you are interested in a jquery approach you can use .one() ! http://api.jquery.com/one/

 var counter = <?php echo $oak;?>
 $(".cut_oak_tree img").one("click",function(){
 counter++;
 $("#countervalue").text(counter); 
 });

• alex: i hopelessly in love with jquery :P designm.ag/resources/…

Answer 5

// the wrapper that allows to call the inner function only once
function once(inner) {
 var executed = false;
 return function (args) {
 if (executed === false) {
 executed = true;
 inner.apply(this, arguments);
 }
 }
}
// a test function that should only be called once
var inner1 = function (name, age) {
 window.alert("1 " + name + " -> " + age);
}
// another test function
var inner2 = function (name, age) {
 window.alert("2 " + name + " -> " + age);
}
// testing
var wrapped1 = once(inner1);
wrapped1("Tom", 23);
wrapped1("Tina", 24);
wrapped1("Toby", 25);
var wrapped2 = once(inner2);
wrapped2("Tom", 23);
wrapped2("Tina", 24);
wrapped2("Toby", 25);

• Thekwasti: What exactly is unclear? Ask and I'll try to explain it more. The key point of this solution is, that with once you have outsource the problem of making functions only be executable once. It can be reused.
• Thekwasti: Looks like this is like the .one function from jQuery (api.jquery.com/one).
• DontVoteMeDown: Yeah I have understood but I don't know, it was like using a bazooka to kill an ant.
• Thekwasti: Well, the only thing needed from my snippet is the topmost function. The rest is only for demonstration purposes. But yes, I would not write it myself, too, since I use underscore.js (which has such a wrapper function and much more).

Answer 6

I'd create a variable called isClicked, set it to false when the page is loaded, and then set it to true when the image is clicked. Then write an if statement to make sure isClicked is false before incrementing the counter.

<script type="text/javascript">
 var counter = <?php echo $oak; ?>;
 var isClicked = false;
 function myFunction() {
 if (isClicked === false){
 isClicked = true;
 counter++;
 }
 document.getElementById('countervalue').innerHTML = counter;
 }
</script>

• user3287771: Works perfect, only problem is that I have three images using the same function, it has to count 1 up every time an image is pressed. Any ideas? Thanks
• snollygolly: I'm assuming you want to track each image's clicks separately? Going with the boolean approach, perhaps an array of booleans, each one tracking, or use @DontVoteMeDown's approach with passing the img as a parameter to the function and removing the click handler. That would seem to work.