javascript - 引用错误: sendButton is not defined-6ren

javascript - 引用错误: sendButton is not defined

转载作者：行者123 更新时间：2023-12-02 17:32:48

24

4

您好，这是我的基本编程类(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/

24

4

0

文章推荐： javascript - D3 : adding a line when clicking on a circle in scatter plot

文章推荐： javascript - JS 文件最大行数和性能

文章推荐： c# - 使用 AJAX 上传文件

文章推荐： javascript - phantom js 直到循环结束才注入(inject) javascript

c++ - 将函数作为参数传递的良好做法 : copy, 引用，const 引用？
这个问题在这里已经有了答案: 关闭 10 年前。 Possible Duplicate: template pass by value or const reference or…? 以下对于将函数
C++ 重载运算符两次，一次返回非 const 引用，另一次返回 const 引用，偏好是什么？
我用相同的参数列表重载了一个运算符两次。但返回类型不同: T& operator()(par_list){blablabla} const T& operator()(par_list){bla
java - 如果 ViewModel 持有此 Activity 实现的接口(interface)引用，GC 是否会收集 Activity 引用？
假设我有实现接口(interface) I 的 Activity A。我的 ViewModel 类 (VM) 持有对实现接口(interface) I 的对象的引用: class A extends
PHP 引用 `$this`
PHP 如何解释 &$this ？为什么允许？我遇到了以下问题，这看起来像是 PHP 7.1 和 7.2 中的错误。它与 &$this 引用和跨命名空间调用以及 call_user_func_arr
引用 Php
谁能解释一下下面“&”的作用: class TEST { } $abc =& new TEST(); 我知道这是引用。但是有人可以说明我为什么以及什么时候需要这样的东西吗？或者给我指向一个对此有很好解
详解C++ 引用
引用变量是一个别名，也就是说，它是某个已存在变量的另一个名字。一旦把引用初始化为某个变量，就可以使用该引用名称或变量名称来指向变量。 C++ 引用 vs 指针引用很容易与指针混淆，它们之间有三
解析C++引用
目录引言背景结论引言我选择写C++中的引用是因为我感觉大多数人误解了引用。而我之所以有这个感受是因为我主持过很多C++的面试，并且我很少
16、Perl 引用
Perl 中的引用是指一个标量类型可以指向变量、数组、哈希表（也叫关联数组）甚至函数，可以应用在程序的任何地方创建引用定义变量的时候，在变量名前面加个 \，就得到了这个变量的一个引用 $sc
Perl，通过调用其父程序覆盖子程序 |引用
我编写了一个将从主脚本加载的 Perl 模块。该模块使用在主脚本中定义的子程序(我不是维护者)。对于主脚本中的一个子例程，需要扩展，但我不想修补主脚本。相反，我想覆盖我的模块中的函数并保存对原始子例
F# 引用 - 遍历由值表示的函数调用
我花了几个小时试图掌握 F# Quotations，但我遇到了一些障碍。我的要求是从可区分的联合类型中取出简单的函数(只是整数、+、-、/、*)并生成一个表达式树，最终将用于生成 C 代码。我知道使用
regex - 引用 - 密码验证
很多时候，问题(尤其是那些标记为 regex 的问题)询问验证密码的方法。似乎用户通常会寻求密码验证方法，包括确保密码包含特定字符、匹配特定模式和/或遵守最少字符数。这篇文章旨在帮助用户找到合适的密码
excel - 引用公式中的单元格地址/引用
我想通过 MIN 函数内的地址(例如，C800)引用包含文本的最后一个单元格。你能帮忙吗？ Sub Set_Formula() ' ----------------------------- Dim
for-of 循环中的 Javascript 引用
使用常规的 for 循环，我可以做类似的事情: for (let i = 0; i < objects.length; i++) { delete objects[i]; } 常规的 for-
cucumber :引用/不引用参数的最佳实践是什么
在 Cucumber 中，您定义了定义 BDD 语法的步骤；例如，您的测试可能有: When I navigate to step 3 然后你可以定义一个步骤: When /^I navigate t
linq - 表达式类型.引用
这是什么UnaryExpression的目的，以及应该怎样使用？最佳答案它需要一个 Expression对象并用另一个 Expression 包裹它.例如，如果您有一个用于 lambda 的表达式
JQuery 多个选择器，$(this) 引用？
给出以下内容 $("#identifier div:first, #idetifier2").fadeOut(300,function() { // I need to reference jus
xslt - XPath 引用
我不知道我要找的东西的正确术语，但我要找的是一个完整的引用，可以放在双引号之间的语句，比如 *， node()、@* 以及所有列出的 here加上任何其他存在的。我链接到的答案提供了一些细节，但还
regex - 引用-此正则表达式是什么意思？
This question's answers are a community effort。编辑现有答案以改善此职位。它当前不接受新的答案或互动。这是什么？这是常见问答的集合。这也是一个社区Wi
accessibility - Microsoft的UI自动化的教程/引用
Closed. This question does not meet Stack Overflow guidelines。它当前不接受答案。想改善这个问题吗？更新问题，以便将其作为on-topic
rust - 引用“静态生命周期不长？
考虑下一个代码: fn get_ref(slice: &'a Vec, f: fn(&'a Vec) -> R) -> R where R: 'a, { f(slice) } fn m

首页

博学

6Ren·AI

商城

javascript - 引用错误: sendButton is not defined