'Object is not a function' - onclick event

Question

Before I start, no I have no issues that I can find with semicolons, and I'm passing NO values to the function.

When I try to do function "login()" from the console, it works just fine, but when I click an HTML input button to call it, I get "Uncaught TypeError: object is not a function". This is in Chrome by the way.

var aj=new XMLHttpRequest();
var loginf=document.forms["login"];
var regf=document.forms["reg"];

function login(){
var errors=document.getElementById("login_err");
var errs=[];
var uname=loginf['uname'];
var pass=loginf['pass'];
var unameVal=uname.value;
var passVal=pass.value;

if(unameVal.length<4 && unameVal.length>0){
    errs.push("Username too short. Try again please.");
}
else if(unameVal.length>18){
    errs.push(innerHTML="Username is too long. Try again please.");
}
else if(unameVal.length==0){
    errs.push("Please enter a username.");
}

if(passVal.length<8){
    errs.push("Password too short. Try again, please.");
}
else if(passVal.length>30){
    errs.push("Password is too long. Try again please.");
}

if(errs.length==0){
    aj.onreadystatechange=function(){
        if(aj.readyState>=4 && aj.status==200){
            if(aj.responseText=="suc"){
                window.location="/new.php";
            }
        }
    }
    aj.open("POST","/inc/php/core.php",false);
    aj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    aj.send("login=true&data="+data);
}
else{
    errors.innerHTML="<ul>";

    for(var x=0;x<errs.length;x++){
        errors.innerHTML+="<li>"+errs[x]+"</li>";
    }

    errors.innerHTML+="</ul>";
}
}

function reg(){

}

And then the input button..

<input type="button" class="submit" value="Log in" style="width:25%" onclick="login();"/>

I see nothing wrong with the code.

Thank you in advance if you can find Waldo in this code.

jsFiddle HERE: http://jsfiddle.net/6sa7M/2

Move the script to the head and change the name of the function so that it does not collide with an element id. Notice, not the form with the name login, the div with the id login is a collision. — Marc
– Marc, Commented Mar 13, 2013 at 2:34

Ricky Yoder · Accepted Answer · 2013-03-13 02:36:44Z

7

It turns out that the function name "login" was both a reference to the form and function.

I changed "login()" to "loginUser()", and typed "login" into the console, and the form was returned, so they were indeed conflicting with each other.

Thank you again for all the help and special thanks to Marc for the true answer.

answered Mar 13, 2013 at 2:36

Ricky Yoder

5713 gold badges11 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

the system Over a year ago

You can easily avoid these sorts of collisions by putting all your identifiers under a single namespace.

Collectives™ on Stack Overflow

'Object is not a function' - onclick event

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related