Why is this code for a jQuery chatbot not working?

Question

I'm following this tutorial and have the following code:

CSS:

.bot {
    color:#CCCCCC;
    font-weight:bold;
}

Javascript:

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

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

I've followed the tutorial thoroughly and don't know why the code isn't working. Does any one know what the problem could be?

Answer 1

You are missing a quote " in your username function to close the html string:

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

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

Errors like this will show up in your browser debug console.

Answer 2

All of the related jquery code for the tutorial needs to be included in the $(function () {}

Here is a working example:

http://jsfiddle.net/3wySt/5/

and the corrected script:

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);

    });

});