JavaScriptエラー：未知の型エラー：fooは関数ではありません

Question

何らかの理由でJavaScriptが自分の関数を認識していないようです。

私はいくつかのHTMLでボタンを持っている：私はエラーを取得するボタンをクリックすると

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

：

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

、その後のJavaScriptのビットを

Uncaught TypeError: lightOn is not a function

これはなぜ機能しないのでしょうか？

ありがとうございました。

Answer 1

問題はあなたの要素に同じID："lightOn"を与えていることです。このスコープでは、lightOnが要素であり、これは関数（read more）をシャドウします。

簡単な解決策は、要素に異なるIDまたは関数の別の名前を付けることです。

より良い1はHTMLからスクリプトを分離するために、次のようになります。onclick属性を使用するのではなく、

<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"}); 
    }); 
}); 

Answer 2

、そうのように、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>

Answer 3

これを試してみてください：

var lightOn = function(){ 

} 

そして、あなたではなく、あまりにもjQueryのを使用してのバニラJSでこのすべてを行うことができます：var lightOn = function()とfunction lightOn()のための良好な説明はここで見つけることができ

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

：https://stackoverflow.com/a/336868/1887101