JavaScript错误：未捕获TypeError：foo不是函数

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

出于某种原因,JavaScript似乎无法识别我的功能。

I have a button in some HTML:

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

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

and then a bit of JavaScript:

然后是一点JavaScript:

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

When I click on the button I get the error:

当我点击按钮时,我收到错误:

Uncaught TypeError: lightOn is not a function

未捕获的TypeError:lightOn不是函数

Any idea why this won't work?

知道为什么这不起作用?

Thanks.

3 个解决方案

#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).

问题是你给你的元素提供了相同的id:“lightOn”。在这个范围内,lightOn是影响函数的元素(阅读更多)。

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

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

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

更好的方法是将脚本与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"});
    });
});

#2

Instead of using the onclick attribute, it is much cleaner to add the event listener in JavaScript, like so:

而不是使用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>

#3

Try this:

var lightOn = function(){

}

And you can do all of this in vanilla JS instead of using jQuery too:

你可以用vanilla JS来完成所有这些,而不是使用jQuery:

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

A good explanation for var lightOn = function() and function lightOn() can be found here: https://*.com/a/336868/1887101

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

#1