I have problem with javascript, in my html code:
<input onclick="myFunction();" />
<script>
function myFunction(){
//excecution of this fucntion
}
</script>
After clicking the input, the function runs. But I want myFunction to be disable after the first click, so when I click again, myFunction won't run.
Just remove the attribute
<input onclick="myFunction(this);" />
<script>
function myFunction(elem){
// code here
elem.removeAttribute('onclick')
}
</script>
or even better use event listeners
<input id="myInput" />
<script>
document.getElementById('myInput').addEventListener('click', myFunction, false);
function myFunction(elem){
// code here
this.removeEventListener('click', myFunction);
}
</script>
this.onclick = null
on... attributes are mapped to the property. Of course, using addEventListener is much easier in my opinionaddEventListener should be preferred, +1One way is to set it to a empty function, after the code has executed.
function myFunction(){
//(..) Some code
myfunction = function(){}; // empty the function so nothing happens next time
}
If you're using jQuery (as You have included it in the tags), I'd go with .one():
<input type="txt" class="my-input" />
function activateClick(){
// single click:
$('.my-input').one('click', function(){
// do stuff ...
});
}
// Activate single click on input element
// Can be reactivated later on, using the same function (see DEMO):
activateClick();
Use a boolean indicator to determine whether the function has already run or not. The advantage with this method is that it is easy to reset the function status at a later date.
<!DOCTYPE html>
<html>
<body>
<button onclick='func();'>Function</button>
</body>
<script>
var funcActive=true;
function func() {
if (funcActive) {
funcActive=false;
alert('func ran');
}
}
</script>
</html>
thistomyFunctionand at the end dothis.disabled=true;