Uncaught ReferenceError - 関数が定義されていません

私はいくつかのボタンで小さなウェブサイトを作成しました。各ボタンは、あらかじめ定義されたJS関数を呼び出す必要があります。しかし、ボタンを押すたびに、関数が定義されていないことを示すReferenceErrorが返されます。Uncaught ReferenceError - 関数が定義されていません

(index):1 Uncaught ReferenceError: mainLightOn is not defined

は、ここに私のサイトのコードです：私は私のサーバーからWebサイトを開いたときに

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 
    <title>Home Cinema Control Center</title> 
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" type="text/javascript"></script> 
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
     td { 
      padding: 10px; 
     } 
     body { 
      font-family: Segoe UI, Arial, sans-serif; 
      background-color: #636363; 
     } 
     p { 
      color: #3b3b3b; 
      font-size: 4.0em; 
     } 
     .btn-xlarge { 
      padding: 18px 28px; 
      font-size: 3.5em; 
      line-height: normal; 
      border-radius: 8px; 
     } 
     .box { 
      background-color: #fbfbfb; 
      margin: 120px auto; 
      padding: 20px; 
      border-radius: 5px; 
      box-shadow: 10px 15px 20px rgba(0, 0, 0, 0.3); 
     } 
    </style> 
    <script type="text/javascript"> 
     function httpGetAsync(theUrl) { 
      var xmlHttp = new XMLHttpRequest(); 
      xmlHttp.onreadystatechange = function() { 
       if (xmlHttp.readyState == 4 && xmlHttp.status == 200) { 
        // Add stuff later 
       } 
      } 
      xmlHttp.open("GET", theUrl, true); 
      xmlHttp.send(null); 
     } 

     function mainLightOn() { 
      httpGetAsync("/api/mainlight/1"); 
     } 

     function mainLightOff() { 
      httpGetAsync("/api/mainlight/0"); 
     } 
    </script> 
</head> 

<body> 
    <div class="box" style="width:90%; display:table"> 
     <table style="width:100%"> 
      <tr> 
       <td style="width:40%;"> 
        <p>Main Light</p> 
       </td> 
       <td style="width:30%;"> 
        <button type="button" class="btn btn-success btn-xlarge btn-block" onclick="mainLightOn()">On</button> 
       </td> 
       <td style="width:30%;"> 
        <button type="button" class="btn btn-danger btn-xlarge btn-block" onclick="mainLightOff()">Off</button> 
       </td> 
      </tr> 
     </table> 
    </div> 
</body> 

</html>

不思議なエラーにのみ発生ありません。私のラップトップでローカルにhtmlを開くと、関数は正常に呼ばれます。

出典

2016-09-23 Boris

jQueryを含める場合は、なぜそれとそのAJAXメソッドを使用しないのですか？投稿したコードに基づいて表示されているエラーを再現することもできません。 – j08691

試したときに '

の外という名前の関数は、あなたの関数定義は$().ready(function() {... })体の内側にあるので、範囲はちょうどその関数です。 HTML要素から実行されるJavasriptは、グローバルスコープで実行されます。

これらの機能を$().ready()に入れる必要はありません。 DOMを実行する前に準備が整うまで待たなければならない場合は、コードをそこに置くだけです。しかし、これらの関数は、ユーザーが要素をクリックしたときにのみ実行されます。これは、DOMの準備ができるまでは実行できません。

出典

2016-09-23 21:03:28 Barmar

それでは、この（暗黙の）準備ができている体からどのように機能を引き出すのですか？ – Boris

なぜ私は彼らが機能の中にいると思ったのか分かりません。先日私は物事を見ていたに違いない。 – Barmar

Uncaught ReferenceError - 関数が定義されていません

関連する問題