未捕获的 ReferenceError - 未定义函数答案

【问题标题】：Uncaught ReferenceError - Function is not defined未捕获的 ReferenceError - 未定义函数
【发布时间】：2016-09-23 20:17:36
【问题描述】：

我创建了一个带有几个按钮的小型网站。每个按钮都应该调用一个之前定义的 JS 函数。但是每次按下按钮时，我都会收到一个 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 时，函数调用正常。

【问题讨论】：

如果你包含 jQuery 为什么不使用它和它的 AJAX 方法呢？根据您发布的代码，我也无法重现您看到的错误。
您尝试时是否将函数包装在<script> 元素的.ready() 处理程序中？您能否在 stacksn-ps blog.stackoverflow.com/2014/09/…、jsfiddle jsfiddle.net 或 plnk plnkr.co 重现该问题？
在 jsfiddle 上运行良好：jsfiddle.net/dp46Lyn1

标签： javascript html referenceerror

【解决方案1】：

您的函数定义在 $().ready(function() {... }) 主体内，因此作用域就是该函数。从 HTML 元素执行的 Javasript 在全局范围内执行。

没有必要将这些函数放在$().ready() 中。如果必须等到 DOM 准备好才能运行，您只需将代码放在那里。但是这些函数只有在用户点击元素时才会执行，这在 DOM 准备好之前不会发生。

【讨论】：

那么我如何从这个（隐式？）现成体中获得功能？
我不知道为什么我认为它们在函数内部。前几天我一定是看到了一些东西。
@Barmar 即使你说你在哪里看到 5 年前的东西，你在哪里，因为它们在 ready() 函数中，这有助于我理解为什么我的函数嵌入在锚标记中在td 标签内给出了Uncaught ReferenceError。谢谢。

【解决方案2】：

如果命名函数在.ready() 处理程序中，则可以重现错误，其中this 设置为document

<!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">
      $().ready(function() {
        function httpGetAsync(theUrl) {
          console.log(theUrl);
        }    

      
        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>

解决方案，因为似乎无法使用.ready() 将this 设置为document 以外的其他值，其中onclick 处理程序期望this 为window，因此将.ready() 处理程序之外的命名函数

<!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) {
          console.log(theUrl);
        }    

      
        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>

【讨论】：

但这就是我所做的，不是吗？我的代码中没有 .ready() 处理程序。
@Boris “但这就是我所做的，不是吗？我的代码中没有 .ready() 处理程序。” 你可以在 plnkr plnkr.co 复制?