'this' reference to item clicked erroring in ie

StackOverflow https://stackoverflow.com/questions/1008103

Question

For the code below, I am having some issues in IE. The second parameter passed to the function should be a reference to the item clicked. This works fine in FF and Safari, but when I tested it in IE7 it errors. IE appears to get the element (as seen in the console) but whenever I try to do anything with it I get the error:

"Object doesn't support this property or method"

Thanks for the help.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js"></script>
<script type='text/javascript' src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>   
<script language="javascript" type="text/javascript">   
    var Test = {            
        doIt: function(str, btn) {  
            console.log(str);
            console.log(btn);               
            if (btn.hasClassName('red')) {
                console.log('has red');         
            } else {
                console.log('doesn\'t');
            }           
        }   
    };  
</script>   
<a href="#" onClick="Test.doIt('hello', this)" class="red">Test</a> 
</body></html>
Was it helpful?

Solution

The problem is that btn does not automatically have the method hasClassName - that's a Prototype extension.

To extend your element with prototype extension functions, add this line at the top of doIt():

btn = $(btn); // Extends element with Prototype functions.

Your code should work from there.

OTHER TIPS

This is because when using Prototype, elements aren't automatically extended with the Prototype functions on the page load in IE, they specifically have to pass through a $() call to extend the elements with these methods. Add this to the top of your function to make it work in IE.

doIt : function(str, btn) {
    btn = $(btn);
}

Edit: To clarify, in all browsers other than IE 7 (iirc) and below HTML Elements will be prototyped automatically, but in IE <= 7 they must pass through the $() function to have these prototypes applied.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top