Uncaught ReferenceError - Функция не определена

Я создал небольшой веб-сайт с несколькими кнопками. Каждая кнопка должна вызывать ранее определенную функцию JS. Но при каждом нажатии кнопки я получаю ReferenceError, заявляя, что функция не определена.Uncaught ReferenceError - Функция не определена

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

Вот код моего сайта:

<!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()' 'в элементе'

Ваши определения функции находятся внутри $().ready(function() {... }) тела, поэтому сфера только эта функция. Javasript, выполненный из элементов HTML, выполняется в глобальной области.

Нет необходимости устанавливать эти функции внутри $().ready(). Вам нужно только поставить код там, если ему нужно подождать, пока DOM будет готова до запуска. Но эти функции будут выполняться только тогда, когда пользователь нажимает на элементы, чего не может быть до тех пор, пока DOM не будет готов.

источник

2016-09-23 21:03:28 Barmar

Итак, как мне получить функции из этого (неявного?) Готового тела? – Boris

Я не уверен, почему я думал, что они находятся внутри функции. На днях я, должно быть, видел вещи. – Barmar

Uncaught ReferenceError - Функция не определена

Смежные вопросы