Question

嗨，这是我的基本编程课程的代码，我们正在构建一个实时的网络聊天网络应用程序。

在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>

所以我想知道导致错误的原因是什么？

谢谢，戴夫

Answer 1

当窗口sendButton事件发生时，您正在定义变量onLoad。但是你对click事件的定义是在onLoad事件函数之外发生的，因此它不存在且未定义。将您的点击事件定义移动到onLoad

的功能中

Answer 2

您已在window.onload函数中定义了sendButton var。这意味着它是该功能的本地。如果您在不同功能的整个页面中使用它们，那么您最好不要做的事情是在window.onload之外声明变量，然后在其中使用它们。例如：

var sendButton, userName, variables etc;
window.onload = function() {
    sendButton = document.getElementByIf('sendBtn');
    // more variables
};

然后你可以在其他功能中使用它们。另外，您还需要在window.onload中绑定事件处理程序。

Answer 3

你的第一个问题是固定的，很棒。其次，对于音频，我首先粘贴相关代码：

    function Sound(soundURL) {
            document.getElementById("dummy").innerHTML=
                "<embed src='"+soundURL+"'hidden=true autostart=true loop=false>";
    };
} // window.onload end
</script>

<span id="dummy"></span>

最好使用它：

    var currSong = "";
    function Sound(newSong) {
        if (newSong != ""){
            if(currSong != "" ) {
                document.getElementById(currSong).pause();
            }           
            var newSongEl = document.getElementById(newSong);
            newSongEl.currentTime = 0;
            newSongEl.play();
            currSong = newSong;
        }
    }
} // window.onload end
</script>

<audio id="audio" src="/sounds/music.mp3" autostart="false"></audio>

^{来自here的JS代码}

newSong是元素的id。

希望这有帮助！

ReferenceError：未定义sendButton

3 个答案: