您好，这是我的基本编程类(class)代码，我们正在其中构建实时网络聊天网络应用程序。
在 Firefox 上调试时出现以下错误:
ReferenceError: sendButton is not defined
请参阅下面我的完整代码:
<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title>Chat {BETA}</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Custom Google Web Font -->
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
<!-- Add custom CSS here -->
<link href="css/landing-page.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="http://techify.org"><i class="fa fa-code"></i>STARTS</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">
<div class="collapse navbar-collapse navbar-right navbar-ex1-collapse">
<ul class="nav navbar-nav">
<li><a href="about.html">About</a>
</li>
<li><a href="progress.html">Progress</a>
</li>
<li><a href="rtwc.html">CHAT {BETA}</a>
</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container -->
</nav>
<script src = "http://nuigchat-nuigexplore.rhcloud.com/socket.io/lib/socket.io.js"></script>
<script>
window.onload = function () {
// create a websocket to the chat server
var socket = io.connect ('ws://nuigchat-nuigexplore.rhcloud.com:8000/');
// send button event handler
var sendButton = document.getElementById("sendBtn");
// handle for user name
var userName = document.getElementById("uName");
// message text box handler
var messageText = document.getElementById("msgTxt");
// clear button event handler
var clearButton = document.getElementById("clearBtn");
// main message window
var messageWindow = document.getElementById("msgWindow");
// send button "on click" code
sendButton.onclick = function () {
sendButton.onclick = function() {
sendMessage();
};
};
// re usable function
function sendMessage() {
if (userName.value!="")
{
console.log("userName is not null");
if(messageText.value=="") {
console.log("messageText is null");
alert("Please type in a message");
}
else {
console.log("messageText is not null");
console.log("Calling sendButton.onclick function");
socket.emit('send', {message: messageText.value, username: userName.value});
messageText.value="";
};
}
else {
console.log("userName is null");
alert("Please type in your name!");
};
};
// handle incoming messages. Append the username and message to the existing content in the div.
socket.on('message', function (data) {
messageWindow.scrollTop = messageWindow.scrollHeight;
messageWindow.innerHTML += '<b>' + data.username + ':</b>' + data.message + '<br />';
if (data.username !=userName.value) {
Sound('/starts/Pop.wav');
}
});
msgTxt.onkeyup = function(event) {
if(event.keyCode == 13) {
sendMessage();
}
}
function Sound(soundURL) {
document.getElementById("dummy").innerHTML=
"<embed src='"+soundURL+"'hidden=true autostart=true loop=false>";
};
}
</script>
<span id="dummy"></span>
<div class="container">
<div class="row">
<div class="page-header" align="center">
<h2><br><small>NUIG Real Time Web Chat</small></h2>
</div>
</div>
</div>
<div id = "banner" style = "background: #5399a6;
width: 500px;
height: 53px;
margin: 0px 0px 10px 100px;
border: solid 1px #BDBDBD;">
<img src="/starts/img/logo.png" width = "176" height = "52">
</div>
<div id="msgWindow" style="width:500px;
height:300px;
margin: 1px 0px 10px 100px;
border:solid 1px grey;
background: #ffffff;
overflow-y:scroll;">
</div>
<div id="controls" style = "margin: 0px 0px 1px 100px;">
Name: <input id ="uName" style = "width:128px;".><br>
<br>
<input id = "msgTxt" style = "width: 350px;">
<input id = "sendBtn" type = "button" value = "send">
</div>
</body>
</html>
所以我想知道是什么导致了错误？
谢谢， 戴夫
最佳答案
当 Windows onLoad 事件发生时，您正在定义变量 sendButton。但是您对单击事件的定义发生在 onLoad 事件函数之外，因此它不存在并且未定义。将您的点击事件定义移至 onLoad
关于javascript - 引用错误: sendButton is not defined，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22915583/