CODEWITHSUNDEEP
javascriptonclickdom-events
user1319236
user1319236

Reputation:

Call an object as a function in JavaScript

I'm trying to execute JavaScript functions that are called when a event (for example onClick event) is performed on a web page with JavaScript code. I'm getting the function from the event like this :

var attributval = document.getElementsByTagName("a").getAttribute('onClick');

and I'm trying to execute this object (which a JavaScript function in fact) as a function (suppose we have <a onClick = alert('whatever');> on this example, I tried:

var attributval = document.getElementsByTagName("a").getAttribute('onClick');
attributval() = function(){attributval};
attributval();

but it didn't work.

Upvotes: 2

Views: 230

Answers (7)

Alexander Pavlov
Alexander Pavlov

Reputation: 32286

A DOM attribute is not the same as a JavaScript property (even though they can have the same name onclick). You should use

var attributval = document.getElementsByTagName("a")[0].onclick;

to retrieve a function (or null) from the JS object (as opposed to getAttribute(), which will most likely return a toString() for the property).

Now, attributval() = is illegal syntax, as attributval() is not an l-value (you cannot assign to it).

attributval(); will work but without the second line (which is illegal JavaScript) it will invoke the original A element onclick handler (if one is defined) or throw an exception (if the onclick handler is null).

Upvotes: 5

Hubro
Hubro

Reputation: 59313

I thought I'd add a short answer on how to work with events using jQuery, since it seems relevant.

// Select the link using it's ID field (assuming it has one)
var myLink = $('a#myLink')

// Add a click event to the link
myLink.on('click', function(e) {
    console.log("I've been clicked!");
});

// Trigger the click event manually. This would result in the above
// function being run. Interestingly, this will not cause the browser
// to follow the link like a real click would
myLink.trigger('click');

// Remove the click event (this removes ALL click events)
myLink.off('click');

// Add a click event to the link that only runs once, then removes itself
myLink.one('click', function() {
    alert("I'll only bother you once!");
});

// Add a click event that you can identify from other click events.
// This means that you can trigger it or remove it without bothering other
// click events
myLink.on('click.myClick', function() {
    alert("This click event has been identified as 'myClick'");
});

// Now you can trigger it without triggering other click events
myLink.trigger('click.myClick');

// And remove it, also with no harm coming to other click events
myLink.off('click.myClick');

Hope this helps

Upvotes: 0

Andrew Leach
Andrew Leach

Reputation: 12973

If you want to do more than a click, then Chris McDonald's answer at Is it possible to trigger a link's (or any element's) click event through JavaScript? seems to fit the bill, although you might need to heed the third comment.

Upvotes: 0

user1207456
user1207456

Reputation:

attributval is simply a string, correct? If you trust this code, execute it with eval(attributval) -- however any reference to this won't work.

What you probably want is to manually trigger an event. jQuery makes that easy.

Upvotes: 0

GillesC
GillesC

Reputation: 10874

By using get attribute you are returning a string so your only way is to use eval(onclickString) or var fn = new Function(onClickString); fn();

Upvotes: 0

Juan Leung
Juan Leung

Reputation: 356

try

var attributval = document.getElementsByTagName("a")[0].getAttribute('onClick');

Upvotes: 0

Guffa
Guffa

Reputation: 700152

Skip trying to create a function around the function. Just call it:

var attributval = document.getElementsByTagName("a")[0].onclick;
attributval();

Upvotes: 0

Related Questions