How do I get everything from this onclick on a class

Hi guys,

I have several tags which look like this:

<a href="a.php" class="myclass" onclick="myFunction(this)">Click</a>
<a href="b.php" class="myclass" onclick="myFunction(this)">Click</a>
<a href="c.php" class="myclass" onclick="myFunction(this)">Click</a>

How do I do something like this:

function myFunction(xxx) {
    // here's what I want:
    //  get everything from xxx with e.preventDefault that when I click on the link it won't go anywhere but show console.log
    console.log(xxx);
}

Is this possible?
Thank you,

Well, since you are passing the element, itself, to the function, you are passing an object, not just one argument. So you would have to parse the object, detect child objects, etc., before preventing the default action.

This has been answered on SO, so check that out and see if it helps.

HTH,

:slight_smile:

no.

for e.preventDefault() to work you need the event. you would need to rewrite your HTML and JS to get a hold on the event object. (in which case you can make it so as to remove the JS call from HTML completely and use event listeners)

if this is meant to be a permanent functionality, better use a <span> than an <a>.

The myFunction is only being passed a reference to the ‘this’ keyword, so the event object is not available to you.

Ugly solution

There is an ugly workaround by returning false from the function, which not only prevents the default action, but also suppresses the event from bubbling up to parent elements too. But, that will only work if the onclick event is edited so that it returns myFunction

<a href="a.php" class="myclass" onclick="return myFunction(this)">Click</a>
function myFunction(el) {
    console.log(el);
    return false;
}

You can try out the above code at http://jsfiddle.net/hw70sxrw/

A better solution

If you’re going to edit the HTML code for that, then you may as well to do the job more properly instead.

A better way is to pass the event instead of the this keyword, because you can get the element from elsewhere instead.

<a href="a.php" class="myclass" onclick="myFunction(event)">Click</a>
function myFunction(evt) {
    evt.preventDefault();
    
    var el = evt.target || evt.srcElement;
    console.log(el);
}

You can try out the above code at http://jsfiddle.net/hw70sxrw/1/

An even betterer solution

Even better is to remove the onclick attribute completely, and use scripting to attach the function on to the elements. This provides a good separation of concerns, so that scripting changes don’t occur in the HTML, but only in the scripting area where it belongs.

<a href="a.php" class="myclass">Click</a>
function myFunction(evt) {
    evt = evt || event; // to handle older IE issues
    evt.preventDefault();
    
    var el = evt.target || evt.srcElement;
    console.log(el);
}

var myclassLinks = document.querySelectorAll('.myclass'),
    i;
for (i = 0; i < myclassLinks.length; i += 1) {
    console.log(myclassLinks[i]);
    myclassLinks[i].onclick = myFunction;
}

You can try out the above code at http://jsfiddle.net/hw70sxrw/2/

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.