JavaScript Error: Uncaught TypeError: foo is not a function

Question

For some reason JavaScript doesn\'t seem to recognise my function.

I have a button in some HTML:

Answer 1

The problem is you give to your element the same id : "lightOn". In this scope lightOn is the element, which shadows the function (read more).

A simple solution would be to give a different id to the element or a different name to the function.

A better one would be to separate the script from the HTML:

On

$(function(){
    $('#lightOn').click(function() {
        $("#lightOn").addClass("active");
        $("#lightOff").removeClass("active");
        socket.emit("setting", {"light":"on"});
    });
});