JavaScript 错误:未捕获类型错误:foo 不是一个函数

JavaScript Error: Uncaught TypeError: foo is not a function

本文关键字：错误 一个 函数 foo 类型 JavaScript      更新时间：2023-09-26

由于某种原因，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"});
}

当我单击按钮时，出现错误：

未捕获的类型错误：lightOn 不是一个函数

知道为什么这行不通吗？

谢谢。

问题是你给你的元素相同的id："lightOn"。在此作用域中，lightOn是元素，它隐藏函数（阅读更多）。

一个简单的解决方案是为元素提供不同的 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"});
    });
});

而不是使用 onclick 属性，在 JavaScript 中添加事件侦听器要干净得多，如下所示：

$('#lightOn').on('click', function() {
  $("#lightOn").addClass("active");
  $("#lightOff").removeClass("active");
  socket.emit("setting", {"light":"on"});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" class="btn btn-default" id="lightOn">On</button>

试试这个：

var lightOn = function(){
}

你可以在vanilla JS中完成所有这些操作，而不是使用jQuery：

var lightOn = function(){
    document.getElementById('lightOn').className += " active";
    document.getElementById('lightOff').className.replace(/'bactive'b/,'');
    socket.emit("setting", {"light":"on"});
}

可以在这里找到var lightOn = function()和function lightOn()的一个很好的解释：https://stackoverflow.com/a/336868/1887101

相关文章：