javascript - How to get jQuery chat to respond to me -

i trying build front end chat feature on mobile app. have been following youtube series on how it, @ video 14 gentleman went in different direction wanted. want first person type, , have "bot" respond me (in predetermined string). unfortunately how has , bot asks name, respond, , bot says nice meet (name)

my question using code i'll provide, how can "bot" respond me after type first?

$(function(){    $("#chatsend").click(function(){      var username = "<span class = 'chatusername' =>cnn_news: </span>";      var newmessage = $("#chattextbox").val();      $("#chattextbox").val("");      var prevstate = $("#chatcontainer").html();      if (prevstate.length > 7){         prevstate = prevstate + "<br>";     }      $("#chatcontainer").html(prevstate + username + newmessage);      $("#chatcontainer").scrolltop($("#chatcontainer").prop("scrollheight"));    });  }); 

if problem is, bot asks question first, type question/answer...etc, , want first, ignore bot sends.

when load page, , chat starts, clear whatever in chat window. //first- start emptying whatever bot entered $("#chatcontainer").empty();

//start first line  

or ... if want better answer, explain how bot works.

the question remains confusing, here quick bot demo thats basic , simple.

http://jsfiddle.net/91svxht9/4/ 

and code

javascript

var username = "john"; var botname = "bot"; var sendbtn = $("#chatsend"); var chatcontainer = $("#chatcontainer"); var botresponses = [     "wow, thats cool", "im bot", "who you", "thats soo cool" , "give me money" ]; var addmessage = function(who, msg) {     var ownerclass = "bot";     if ( == username ) {ownerclass = "mine";}     chatcontainer.append("<div class='message "+ownerclass+"'><span>"+who+"</span>: "+msg+"</div>");     sendbtn.attr("disabled", true);//disable send until bot responds     chatcontainer.scrolltop($("#chatcontainer").prop("scrollheight"));     } var botrespond = function() {     var msg;     msg = botresponses.shift();     if ( !msg ) { msg = "i have nothing more say";}     addmessage(botname, msg);     sendbtn.removeattr("disabled");//disable send until bot responds }   $(function(){   sendbtn.click(function() {     var msg = $("#chattextbox").val();     if ( !msg ) {alert("enter message before clicking send");return false;}     addmessage(username, msg);     settimeout(function() {botrespond();}, 2000);   }); }); 

html

<div id="chatcontainer">  </div>  <div id="chatcontrols">   <textarea id="chattextbox" placeholder = "enter message          here...">   </textarea>   <button id="chatsend">send</button> </div> 

css

#chatcontainer{     width: 95%;     height: 65px;     background-color: white;     border: 1px solid #333;     margin: 0 auto;     border-radius: 5px;     margin-top: 10px;     opacity: .9;     overflow-y:scroll !important;     padding: 5px; } #chattextbox{     resize: none;     width: 65%;     height: 35px !important;     float: left;     opacity: .9; } #chatcontrols{     width: 100%;     padding-left: 10px;     padding-right: 10px;     display: inline-block; } #chatsend{     resize: none !important;     width: 50%;     height: 35px !important;     display: inline-block;     max-width: 30%;     float: right;     opacity: .9;     padding: 5px; }   .message > span {     color: red;     font-weight: bold; } .chatbot{     color: #484d97;     font-weight:  bold; } .message {margin-top: 4px;} .message.mine {    color: black;    } .message.bot {    color: gray;    } .message.bot>span {    color: green;    }