JavaScript 错误 : Uncaught TypeError: foo is not a function

Question

出于某种原因，JavaScript 似乎无法识别我的函数。

我在一些 HTML 中有一个按钮:

<button type="button" class="btn btn-default" id="lightOn" onclick="lightOn()">On</button>

然后是一些 JavaScript:

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

当我点击按钮时出现错误:

Uncaught TypeError: lightOn is not a function

知道为什么这行不通吗？

谢谢。

Answer 1

问题是你给你的元素相同的 id :"lightOn"。在此范围内，lightOn 是元素，它隐藏函数 ( read more )。

一个简单的解决方案是为元素提供不同的 id 或为函数提供不同的名称。

更好的方法是将脚本与 HTML 分开:

<button type="button" class="btn btn-default" id="lightOn">On</button>

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