Javascript 为什么jQuery聊天机器人的代码不起作用？

我正在学习教程，并拥有以下代码：

CSS:

Javascript:

function username(){
    $("#container").html("<span class = 'bot'>Chatbot: </span>Hello, what is your name?);
}

$(function(){
    username();
});

函数用户名（）{
$（“#container”）.html（“聊天机器人：你好，你叫什么名字？”；
}
$（函数（）{
用户名（）；
});

---

我已经完全遵循了教程，不知道代码为什么不起作用。有人知道问题出在哪里吗？

您的

用户名

函数中缺少了一个引号

“

来关闭html字符串：

function username() {
    $("#container")
        .html("<span class = 'bot'>Chatbot: </span>Hello, what is your name?");
}

$(function() {
    username();
});

函数用户名（）{
$（“容器”）
.html（“聊天机器人：你好，你叫什么名字？”）；
}
$（函数（）{
用户名（）；
});

---

类似的错误将显示在浏览器调试控制台中。

您的

用户名

函数中缺少关闭html字符串的引号

“

：

function username() {
    $("#container")
        .html("<span class = 'bot'>Chatbot: </span>Hello, what is your name?");
}

$(function() {
    username();
});

函数用户名（）{
$（“容器”）
.html（“聊天机器人：你好，你叫什么名字？”）；
}
$（函数（）{
用户名（）；
});

---

类似的错误将显示在浏览器调试控制台中。

教程的所有相关jquery代码都需要包含在$（function（）{}

以下是一个工作示例：

以及更正后的脚本：

var username = "";

function send_message(message) {
    $("#container").html("<span class=&quot;bot&quot;>Chatbot: </span>" + message);
}

function get_username() {
    send_message("Hello, what is your name?");
}

function ai(message) {
    if (username.length < 3) {
        username = message;
        send_message("Nice to meet you " + username + ", how are you doing?");
    }
}

$(function () {

    get_username();

    $("#textbox").keypress(function (event) {
        if (event.which == 13) {
            if ($("#enter").prop("checked")) {

                $("#send").click();
                event.preventDefault();

            }

        }

    });

    $("#send").click(function () {

        var username = "<span class=&quot;username&quot;>You: </span>";

        var newMessage = $("#textbox").val();

        $("#textbox").val("");

        var prevState = $("#container").html();

        if (prevState.length > 3) {
            prevState = prevState + "";
        }

        $("#container").html(prevState + username + newMessage);

        $("#container").scrollTop($("#container").prop("scrollHeight"));

        ai(newMessage);

    });

});

var username=”“；
功能发送消息（消息）{
$（“#容器”）.html（“聊天机器人：+消息）；
}
函数get_username（）{
发送信息（“你好，你叫什么名字？”）；
}
功能ai（信息）{
如果（username.length<3）{
用户名=消息；
发送消息（“很高兴见到你”+用户名+”，你好吗？）；
}
}
$（函数（）{
获取用户名（）；
$（“#文本框”）。按键（功能（事件）{
if（event.which==13）{
如果（$（“#输入”）.prop（“选中”））{
$（“#发送”）。单击（）；
event.preventDefault（）；
}
}
});
$（“#发送”）。单击（函数（）{
var username=“您：”；
var newMessage=$（“#文本框”）.val（）；
$（“#文本框”）.val（“”）；
var prevState=$（“#容器”）.html（）；
如果（prevState.length>3）{
prevState=prevState+“”；
}
$（“#container”）.html（prevState+username+newMessage）；
$（“#容器”）.scrollTop（$（“#容器”）.prop（“scrollHeight”）；
ai（新消息）；
});
});

教程的所有相关jquery代码都需要包含在$（函数（）{}中

以下是一个工作示例：

以及更正后的脚本：

var username = "";

function send_message(message) {
    $("#container").html("<span class=&quot;bot&quot;>Chatbot: </span>" + message);
}

function get_username() {
    send_message("Hello, what is your name?");
}

function ai(message) {
    if (username.length < 3) {
        username = message;
        send_message("Nice to meet you " + username + ", how are you doing?");
    }
}

$(function () {

    get_username();

    $("#textbox").keypress(function (event) {
        if (event.which == 13) {
            if ($("#enter").prop("checked")) {

                $("#send").click();
                event.preventDefault();

            }

        }

    });

    $("#send").click(function () {

        var username = "<span class=&quot;username&quot;>You: </span>";

        var newMessage = $("#textbox").val();

        $("#textbox").val("");

        var prevState = $("#container").html();

        if (prevState.length > 3) {
            prevState = prevState + "";
        }

        $("#container").html(prevState + username + newMessage);

        $("#container").scrollTop($("#container").prop("scrollHeight"));

        ai(newMessage);

    });

});

var username=”“；
功能发送消息（消息）{
$（“#容器”）.html（“聊天机器人：+消息）；
}
函数get_username（）{
发送信息（“你好，你叫什么名字？”）；
}
功能ai（信息）{
如果（username.length<3）{
用户名=消息；
发送消息（“很高兴见到你”+用户名+”，你好吗？）；
}
}
$（函数（）{
获取用户名（）；
$（“#文本框”）。按键（功能（事件）{
if（event.which==13）{
如果（$（“#输入”）.prop（“选中”））{
$（“#发送”）。单击（）；
event.preventDefault（）；
}
}
});
$（“#发送”）。单击（函数（）{
var username=“您：”；
var newMessage=$（“#文本框”）.val（）；
$（“#文本框”）.val（“”）；
var prevState=$（“#容器”）.html（）；
如果（prevState.length>3）{
prevState=prevState+“”；
}
$（“#container”）.html（prevState+username+newMessage）；
$（“#容器”）.scrollTop（$（“#容器”）.prop（“scrollHeight”）；
ai（新消息）；
});
});

好的，谢谢，但是现在每次我在文本框中输入文本并单击“发送”时，容器中都不会显示任何内容。为什么会发生这种情况？因为每次容器的内容都会以相同的方式刷新，请尝试如下：var text=$（部分输入）.val（）；$（“#container”）.html（$（“#container”）.html（）+文本）；还有，现在我以前遇到的问题又回来了。好的，谢谢，但是现在每次我在文本框中输入文本并单击“发送”时，容器中都不会出现任何内容。为什么会发生这种情况？因为每次容器的内容都会以相同的方式刷新，就像这样var text=$（一些输入）.val（）；$（“#容器”）.html（$（“#容器”）.html（）+文本）；而且，现在我以前遇到的问题又回来了。