Question

这些代码有什么问题？如果我尝试在聊天中编写内容，则会显示“未定义”而不是文本。当我从聊天框的“输入类型”更改为“文本区域类型”并添加id时，我开始遇到此问题，似乎id =“ text1”是导致此问题的原因，但我不知道如何定义它。

<!DOCTYPE html>
<html>

<head>

  <title>title</title>
  <link rel="stylesheet" href="css/main.css" />
  <meta charset="UTF-8">
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256- 
DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"> 
</script>
<script type="text/javascript" src="AjaxPush.js"></script>

</head>

<body>

 <script type="text/javascript">

    var comet = new AjaxPush('listener.php', 'sender.php');
    var n = new Function;

    var c = "black";
    var template = "<strong style='color: " + c + "'>" + 'You' + "</strong>: ";

    comet.connect(function(data) { $("#history").append(data.message) + "<br>"; });

    var send = function() {
        comet.doRequest({ message: template + $("#message").val() + "<br>" }, function(){
            $("#message").val('').focus();
        })
    }
</script>

 <textarea type="text" id="text1"  autofocus id="message"  placeholder="your 
message!"> </textarea>

 <textarea id="dataChannelReceive" enabled></textarea>
    <button onclick="send()" id="sendChat">Send</button><br><br>
    <div id="history"></div>

  <script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
  <script src="index.js"></script>

</body>
</html>

JS：

AjaxPush = function(listener, sender)
{
    this.listener = listener || "";
    this.sender = sender || "";
    this.state = false;
    this.timestamp = 0;
}

AjaxPush.prototype =
{
    connect: function(callback) {
        var that = this;
        var status = false;

        $.ajax({ url: this.listener, dataType: 'json',
            data: { timestamp: this.timestamp },
            success: function(data)
            {
                if (!that.state)
                    console.info("Connected!");

                status = true;
                this.state = true;
                that.timestamp = data["timestamp"];
                callback(data);
            },
            complete: function(data)
            {

                 if (!status)
                {
                    console.info("The connection has been lost!, trying to 
reconnect ...");
                    setTimeout(function(){ that.connect(callback); }, 1000);
                }           
                else
                    that.connect(callback);

                that.state = (data.status == 200) ? true: false;
            }
        });
    },

    doRequest: function(data, callback) {
        $.ajax({ url: this.sender, data: data,
            success: function() { callback(); }
        });
    }
}

Answer 1

您的textarea具有重复的id，即text1和message。您正在尝试在已分配ID文本1的情况下选择ID消息。

Answer 2

您可以使用以下方法解决您的问题：

// id="text1", id="message" duplicated
<textarea type="text" id="text1"  autofocus id="message"  placeholder="your 
message!"> </textarea>

为什么会出现未定义错误？ JavaScript + HTML

2 个答案: