未捕獲的ReferenceError-未定義函數
[英]Uncaught ReferenceError - Function is not defined
問題描述
我創建了一個帶有幾個按鈕的小型網站。 每個按鈕都應調用先前定義的JS函數。 但是，每按一次按鈕，我都會得到一個ReferenceError，指出該函數未定義。
（索引）：1未捕獲的ReferenceError：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時，這些功能就很好了。
2 個解決方案
解決方案1
1 2016-09-23 21:03:28
您的函數定義在$().ready(function() {... })主體中，因此作用域就是該函數。 從HTML元素執行的Javasript在全局范圍內執行。
無需將這些函數放在$().ready() 。 僅在必須等待DOM准備就緒才能運行之前，才需要將代碼放在那里。 但是這些功能僅在用戶單擊元素時才執行，只有在DOM准備就緒時才可能發生。
解決方案2
0 2016-09-23 20:39:50
如果命名函數位於.ready()處理函數中.ready() this位置設置為document .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"> $().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>
解決方案，因為它不似乎是可以設置this比其他的document使用.ready()其中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>
未捕獲的ReferenceError :(函數）未定義
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.