Why doesn't the error object have a method in the Chrome debugger when using the variable name?

Question

<form name="email" method="post" action="forms/email.php"> <div id="email"> Sign up for Email <input type="hidden" value="<?php $page; ?>" name="page"> <input class="searchtext" name="name" type="text" value="Name" id="nameId"/> <input class="searchtext" name="email" type="text" value="Email" id="emailId"/> <a id="submit" class="submitbutton" onClick="document.getElementById('search-form').submit()"></a> </div> </form> <script type="text/javascript"> var name = document.getElementById("nameId"); name.addEventListener("click",func,false); function func() { alert(name.value) } </script> 

I try to listen for an object click, but it gives me an object that does not have a method error.

Answer 1

The problem is that your variable named name collides with document.name , which is undefined. Renaming a variable makes it work;

 if (el.addEventListener) { el.addEventListener('click', func, false); } else if (el.attachEvent){ el.attachEvent('onclick', func); // IE < 9 } 

Even this will work;

 document.getElementById("nameId").addEventListener('click', func, false);