1

I have the javascript code for a link click:

 document.getElementById('giddy').onclick = function {
        alert(this.href);
    };

and I want to separate the function part of it...I have

 document.getElementById('giddy').onclick = poro(this);
    function poro(yyyy) {
        alert(yyyy.href);
    };

But it is not working (says undefined in the alert)...what am I doing wrong?

1
  • Your not assigning the onclick event handler to a function, you are calling the function poro and passing this which at this point is not a hyperlink object. Commented Feb 24, 2012 at 19:49

6 Answers 6

2

You don't need to pass this as a parameter. this will be the context for the function when it is called. You should just have:

document.getElementById('giddy').onclick = poro;
function poro() {
    alert(this.href);
};
Sign up to request clarification or add additional context in comments.

4 Comments

This works?!!? how does javascript know that poro is a function if it does not have ()?
in JS, () executes the function. Functions can be passed around as variables by referencing it without its ().
function poro() { ... } is equivalent to var poro = function() { ... }, which is why this works.
@Dave this being Stack Overflow, that's wrong. They both allow you to pass poro around, but the former declares a named function while the latter assigns an anonymous function to a variable.
0

Get rid of (this) and use this in the function instead of yyyy.

document.getElementById('giddy').onclick = poro;
function poro() {
    alert(this.href);
};

Comments

0

You're immediately calling the poro function. Essentially, you're telling Javascript that the element's onclick value will equal the result of calling the poro(this [window] ) function.

To get around this, you can wrap the poro(this) function inside an empty function, like so:

document.getElementById('giddy').onclick = function(){poro(this)} function poro(yyyy) { alert(yyyy.href); };

You may also want to consider using an eventListener, as it allows room for expansion.

Comments

0

Almost there! You should do:

document.getElementById('giddy').onclick = function(){ poro(this); }
function poro(yyyy) {
    alert(yyyy.href);
};

Note poro(this); wrapped in an anonymous function.

2 Comments

I always forget that they're called anonymous functions... not sure why.
Why would you create an anonymous function for this? This completely ignores one of the major benefits of JavaScript (functions can be passed as variables.)
0

I'd recommend using addEventListener instead of the onclick method.

Try this:

var giddy = document.getElementById('giddy');
giddy.addEventListener('click', function(e) { poro(this); }, false);
function poro(yyyy) {
  alert(yyyy.href);
}

2 Comments

why addeventlistener and not onclick? is it better?
Please see this page for more info: developer.mozilla.org/en/DOM/element.onclick "Only one onclick handler can be assigned to an object at a time with this property. You may be inclined to use the addEventListener method instead, since it is more flexible and part of the DOM Events specification."
0

since you are using jquery use :

$('#giddy').click(function(){ poro($(this));});

or you can use the bind() function

$("#giddy").bind("click", $(this), poro);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.