Reputation: 21
I'm trying to disable an html link after one click. I found some solutions but it seems that they doesn't work on my code. Here is what I tried to do:
<html>
<script type="text/javascript">
function image(url)
{
var img = document.createElement("IMG");
var url = "http://www.luigimelisi.com/wp-content/uploads/2014/03/url_routing.jpg";
img.src = url;
document.getElementById('image').appendChild(img);
}
function clickAndDisable(link)
{
link.onclick = function(event)
{
e.preventDefault();
}
}
</script>
<body>
<div id="image"></div>
<div><a href="javascript:image();"onclick="clickAndDisable(this);">Click Here</a></div>
</body>
</html>
How can I fix it?
Upvotes: 0
Views: 3811
Reputation: 1428
A possible method would be to change the onclick
statement in the a
element to something like:
onclick="this.href=''"
This changes the href
of the hyperlink to nothing, so nothing happens when the link is clicked on. It also obviates the need for the clickAndDisable
function. Is that what you mean by disabled?
Upvotes: 0
Reputation: 580
Actually, your code will work in the way you are hoping. You just made a typo. The mistake you made is in the function 'clickAndDisable' you handle an event by passing in a parameter 'event', but then you try to utilize the event by calling e.preventDefault.
to fix, change e.preventDefault()
to event.preventDefault()
Here is the working code or test on JSFiddle here: https://jsfiddle.net/y6ktL4af/
<html>
<script type="text/javascript">
function image(url)
{
var img = document.createElement("IMG");
var url = "http://www.luigimelisi.com/wp-content/uploads/2014/03/url_routing.jpg";
img.src = url;
document.getElementById('image').appendChild(img);
}
function clickAndDisable(link)
{
link.onclick = function(event)
{
event.preventDefault();
}
}
</script>
<body>
<div id="image"></div>
<div><a href="javascript:image();"onclick="clickAndDisable(this);">Click Here</a></div>
</body>
</html>
Upvotes: 1
Reputation: 510
There are several ways to solve this with disabling or hiding the link but a reusable one would be to attach an event handler to all links that should be clicked only once:
var oneClickEls = document.querySelectorAll('[data-allow-one-click="true"]');
var _i, _len, _el;
for ( _i = 0, _len = oneClickEls.length; _i < _len; _i++ ) {
_el = oneClickEls[_i];
_el.hasBeenClicked = false;
_el.addEventListener('click', function(event) {
if (this.hasBeenClicked) {
event.preventDefault();
return;
}
this.hasBeenClicked = true;
});
}
This will allow us to specify which links should only be clicked one in the html by adding an attribute named data-allow-one-click
:
<a href="javascript:doSomething();" data-allow-one-click="true">Click Here</a>
Here is a js fiddle showing your code working: https://fiddle.jshell.net/1akdp6sp/
Upvotes: 0
Reputation: 11
In your clickAndDisable function and the onclick handler, the event (in this case 'e') is not being passed as a parameter. You pass in 'event' but reference 'e'. You can make this work by changing 'e' to 'event'. This is what your code might look like for that to work:
link.onclick = function(event) {
event.preventDefault();
};
Upvotes: 1
Reputation: 2913
I think you can fix this by removing the href
property of the a
tag, and then modifying the clickAndDisable()
function to do something like:
link.onclick = null;
image();
Upvotes: 0