JQuery - Why do I get "target is not defined"

Question

$(document).ready(function() 
{ 
    $(".menubutton").click(function()
        { 
        var $id=$(event.target.id.substring(0,2));
        $(".active").animate({"top": "-=1000px"}, speedanim);
        $("div#homedrawer div").filter($(".active")).removeClass("active");
        $("#"+$id).animate({"top": "+=1000px"}, speedanim);
        $("#"+$id).addClass("active");
        return false; 
        });

});

The above code generates this error "target is not defined" referring to the line:

var $id=$(event.target.id.substring(0,2));

this is the HTML:

<a id="fesbtn" class="menubutton" href="#"><img src="img/menu/fes.png" alt="" /></a>
<a id="futbtn" class="menubutton" href="#"><img src="img/menu/fut.png" alt="" /></a>
<a id="reibtn" class="menubutton" href="#"><img src="img/menu/rei.png" alt="" /></a>
...

obviously my syntax is wrong. Any thoughts? thank you

Answer 1

If what you're trying to do is get the id of the button that was clicked, then replace this:

var $id=$(event.target.id.substring(0,2));

with this:

var $id = this.id.substring(0,2);

Use this to refer to the object that generated the event. Much easier than reaching into the event object which you haven't defined (which is why you were getting a JS error).

From the rest of your code, it also looks like you just want $id to be a string. If that's the case, then do not try to make a jQuery object out of it. Do you realize that you're only getting a 2 character string here? It looks like you might have three unique characters in the button IDs.

Answer 2

event is not defined

also javascript variables should not start with $

Answer 3

event is missing as an argument of your click handler