未捕获的ReferenceError-未定义函数
Uncaught ReferenceError - Function is not defined
我创建了一个带有几个按钮的小网站。每个按钮都应该调用以前定义的JS函数。但每次按下按钮，我都会得到一个ReferenceError，说明函数没有定义。
(索引(：1未捕获引用错误：未定义mainLightOn
这是我的网站代码：
<!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时，这些函数被称为fine。
您的函数定义位于$().ready(function() {... })主体内，因此作用域仅为该函数。从HTML元素执行的Javasript是在全局范围内执行的。
不需要将这些函数放在$().ready()中。只有在DOM准备就绪后才能运行时，才需要将代码放在那里。但是，这些函数只有在用户单击元素时才会执行，这在DOM准备好之前是不可能发生的。
如果命名函数在.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>相关文章：
- Jquery未定义函数正在停止其他操作
- 在不破坏未定义函数的情况下，对多个视图使用单个js文件
- Uncaught ReferenceError:尝试在Android网络视图中访问时未定义函数
- jQuery文件上传和验证未定义函数
- 引用错误:未定义函数-Firefox
- res.render中出错，未定义函数
- 神秘的未定义函数
- 尝试使用函数和Ajax修改值时未定义函数
- 引用错误:未定义函数
- ReferenceError:未定义函数
- 在 Angular JS 中使用 ng-include 的未定义函数
- 未捕获的引用错误:未定义函数
- j查询工具提示引发错误:未定义函数
- 未捕获的引用错误: 未定义单击世界 -- 未定义函数
- JS:引用错误:未定义函数
- 茉莉花未定义函数
- Javascript 错误:未捕获的引用错误:未定义 [函数]
- 未定义函数
- 尽管 js 文件引用在标头中，但未定义函数
- Javascript 未定义函数错误
