Uncaught ReferenceError - Funktion ist nicht definiert

Ich habe eine kleine Website mit ein paar Tasten erstellt. Jede Schaltfläche sollte eine zuvor definierte JS-Funktion aufrufen. Aber mit jedem Tastendruck bekomme ich einen ReferenceError, der besagt, dass die Funktion nicht definiert ist.Uncaught ReferenceError - Funktion ist nicht definiert

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

Hier ist der Code von meiner Seite:

<!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>

Seltsamer der Fehler nur auftritt, wenn ich die Website von meinem Server öffnen. Wenn ich das HTML lokal auf meinem Laptop öffne, werden die Funktionen als gut bezeichnet.

Quelle

2016-09-23 Boris

Wenn Sie jQuery verwenden, warum nicht verwenden Sie es und seine AJAX-Methoden? Ich kann den angezeigten Fehler auch nicht anhand des von Ihnen geposteten Codes reproduzieren. – j08691

Haben Sie die Funktionen in '.ready()' Handler um '

Ihre Funktionsdefinitionen sind im Inneren des $().ready(function() {... }) Körper, so dass der Umfang ist nur, dass Funktion. Javasript, das aus HTML-Elementen ausgeführt wird, wird im globalen Gültigkeitsbereich ausgeführt.

Sie müssen diese Funktionen nicht in $().ready() einfügen. Sie müssen nur Code dort eingeben, wenn es warten muss, bis das DOM bereit ist, bevor es ausgeführt wird. Aber diese Funktionen werden nur ausgeführt, wenn der Benutzer auf die Elemente klickt, was nicht passieren kann, bis das DOM fertig ist.

Quelle

2016-09-23 21:03:28 Barmar

Also wie bekomme ich die Funktionen aus diesem (impliziten?) Ready-body? – Boris

Ich bin mir nicht sicher, warum ich dachte, sie wären in einer Funktion. Ich muss Dinge neulich gesehen haben. – Barmar

Verwandte Themen