need that javascript function to only runs once [closed]

by

You shouldn’t use inline JavaScript. Not only it makes your code less maintainable but it makes attaching and detaching events much harder.

What you should do is to fetch the target element from the DOM and attach a click handler to it. To be able to detach it later, the click handler can’t be an anonymous function, so define it separately.

Later on you can attach the listener that will be executed when you click the element. If you want to run it only once, you can use the click handler to detach the handler itself afterwards. See example (in the context of an event handler ‘this’ refers to the DOM element itself)

var button = document.getElementById("clickme");
var clickHandler = function(e) {
    alert("clicked");
    this.removeEventListener("click", clickHandler);
}
button.addEventListener("click", clickHandler);

Here’s a working example
http://codepen.io/anon/pen/xAjnG/?editors=101

To extend it further, if you want the button to be active not once but a number of times, you can keep a counter. Note you can use this general case and set limit = 1.

var button = document.getElementById("clickme");
var counter = 0;
var limit = 3;
var clickHandler = function(e) {
alert("clicked " + ++counter);

    if(counter >= limit) {
        this.removeEventListener("click", clickHandler);
    }
}

button.addEventListener("click", clickHandler);

Here’s a working example
http://codepen.io/anon/pen/mzjcC/?editors=101

More Related Contents:

  1. How to skip the zero value in an array of objects? [duplicate]
  2. Get element from within an iFrame
  3. Where can I get info on the object parameter syntax for JavaScript functions?
  4. How to capture an arbitrary number of groups in JavaScript Regexp?
  5. Why is it a bad practice to return generated HTML instead of JSON? Or is it?
  6. Saving binary data as file using JavaScript from a browser
  7. Handle URL fragment identifier (anchor) change event in Javascript
  8. Is there a sleep function in JavaScript? [duplicate]
  9. How to Update a Component without refreshing full page – Angular
  10. Convert canvas to PDF
  11. Bulk upsert in MongoDB using mongoose
  12. Is there any way to use window.onbeforeunload on Mobile Safari for iOS devices?
  13. Understanding Incrementing
  14. Using Canvas to animate a sorting algorithm in JS
  15. ES6 functions, arrow functions and ‘this’ in an ES6 class [duplicate]
  16. TypeError: Cannot read property ‘then’ of undefined
  17. Javascript to convert string to number? [duplicate]
  18. How to round up to the nearest 100 in JavaScript
  19. Pass additional parameter to Javascript callback function [duplicate]
  20. cannot use + when try to add number
  21. How to Autofill last row with formula, when data is received from IFTTT on the last row?
  22. Get the offset position of the caret in a textarea in pixels [duplicate]
  23. Two conditions using OR in XPATH
  24. Do Shared Web Workers persist across a single page reload, link navigation
  25. How can I replace one class with another on all elements, using just the DOM?
  26. Is it possible to export Arrow functions in ES6/7?
  27. IIS 7.5 no images css js showing
  28. Chrome extension identity.email empty
  29. Group and count values in an array
  30. Display Spreadsheet Data to HTML Table

Leave a Comment