CODEWITHSUNDEEP
javascripthtml
Sergio
Sergio

Reputation: 21

Disable href after one click

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

Answers (5)

bcdan
bcdan

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

Quest
Quest

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

rsnorman15
rsnorman15

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

mFeldman
mFeldman

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

kabiroberai
kabiroberai

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

Related Questions