javascriptでユーザー入力と計算された出力の間の背景色を変更する方法

Question

javascriptとjqueryにはかなり新しく、可能かどうかわかりませんが、ここにはあります。私はウェブサイトのための簡単なチャットボット機能を構築しようとしています。基本的にヘルプボタンのリンクをクリックすると、入力のためのプロンプトが表示されたチャットボックスが表示されます。ユーザの入力とそれに応じた応答が出てくる。私はこれすべてうまく動作している。

私が望むのは、ユーザーのテキストの色や背景色を変更することです。「テキスト」またはヘルプ：チャットの間で切り替わる「テキスト」。チャットボックスが前後のテキストでいっぱいになると、ユーザーの入力とフィードバックを区別することが難しくなります。理想的には、私はチャットボックスのフィードバックの背景色を灰色の色にしたいと思います。ここで

HTML

<ul class="nav nav-pills nav-justified"> 
    <li role="presentation" class="dropdown"> 
     <a id="helpBtn" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
     Help<span class="caret"></span></a> 
    <ul class="dropdown-menu"> 
     <div id="helpBox"> 
      <span id="usrText"></span> 
     </div> 
     <input id="textarea" placeholder="Type Here" maxlength="15"> 
    </ul> 
    </li> 
</ul> 

JS/jQueryの

$(function() { 
    $('#helpBtn').click(function() { 
     $(this).toggleClass('active'); 
     $('#helpBox').toggle(); 
     $('#textarea').toggle(); 

     if ($(this).hasClass('active')) { 
      $('#usrText').html(''); 
      $('#usrText').append('HelpBot: What can I help you with? ','<br />'+'Please type "sales", "info" or "contact" for information.','<br />'); 
     } 
    }); 
}); 

$(function() { 
    $('#textarea').keydown(function() { 
     var text = $(this).val(); 

     if (event.keyCode == 13) { 
      $(this).val(''); 
      $('text').css({ 
       "background":"blue", 
       "color":"red" 
      }); 
      $('#usrText').append('User: '+text,'<br />'); 
     } 
     else { 
      return; 
     } 
     if (matches(text)==1) { 
      $('#usrText').append('HelpBot: Todays sales are: ','<br />'); 
     } 
     else if (matches(text)==2) { 
      $('#usrText').append('HelpBot: Find info here: ','<br />'); 
     } 
     else if (matches(text)==3) { 
      $('#usrText').append('HelpBot: Call: or Email: ','<br />'); 
     } 
     else { 
      $('#usrText').append('HelpBot: I did not understand that. ','<br />'); 
      $('#usrText').append('Please type "sales", "info", or "contact". ','<br />'); 
     } 
     return false; 
     $('#helpBox').scrollTop($('#helpBox').children().height()); 
    }); 
}); 

function matches(text) { 
    var a1 = ['sales','sale','bargain']; 
    var a2 = ['info','information','411']; 
    var a3 = ['contact','number','email','phone']; 
    var split = text.split(" "); 

    if (a1.includes(text)) { 
     var match = a1.includes(text); 
     return 1; 
    } 
    else if (a2.includes(text)) { 
     var match2 = a2.includes(text); 
     return 2; 
    } 
    else if (a3.includes(text)) { 
     var match3 = a3.includes(text); 
     return 3; 
    } 
} 

プログラムのjsfiddleです：あなたは、背景を変更したい JSfiddle Chatbot

Answer 1

私はあなたによく理解している場合、 HelpBotメッセージの色？その場合はその後、ちょうど<span style="background-color:lightgray;">テキスト</span>を追加し、このようにそれを実行します。

$(function() { 
 
    $('#helpBtn').click(function() { 
 
    $(this).toggleClass('active'); 
 
    $('#helpBox').toggle(); 
 
    $('#textarea').toggle(); 
 

 
    if ($(this).hasClass('active')) { 
 
     $('#usrText').html(''); 
 
     $('#usrText').append('<span style="background-color:lightgray;">HelpBot: What can I help you with? </span>', '<br />' + '<span style="background-color:lightgray;">Please type "sales", "info" or "contact" for information.</span>', '<br />'); 
 
    } 
 
    }); 
 
}); 
 

 
$(function() { 
 
    $('#textarea').keydown(function() { 
 
    var text = $(this).val(); 
 

 
    if (event.keyCode == 13) { 
 
     $(this).val(''); 
 
     $('text').css({ 
 
     "background": "blue", 
 
     "color": "red" 
 
     }); 
 
     $('#usrText').append('User: ' + text, '<br />'); 
 
    } else { 
 
     return; 
 
    } 
 
    if (matches(text) == 1) { 
 
     $('#usrText').append('<span style="background-color:lightgray;">HelpBot: Todays sales are: </span>', '<br />'); 
 
    } else if (matches(text) == 2) { 
 
     $('#usrText').append('<span style="background-color:lightgray;">HelpBot: Find info here: </span>', '<br />'); 
 
    } else if (matches(text) == 3) { 
 
     $('#usrText').append('<span style="background-color:lightgray;">HelpBot: Please call: (555)555-5555.', '<br /></span>', '<span style="background-color:lightgray;">HelpBot: Or you can email us at: wookiesRus@weirdos.net</span>', '<br />'); 
 
    } else { 
 
     $('#usrText').append('<span style="background-color:lightgray;">HelpBot: I did not understand that. </span>', '<br />'); 
 
     $('#usrText').append('<span style="background-color:lightgray;">Please type "sales", "info", or "contact". </span>', '<br />'); 
 
    } 
 
    return false; 
 
    $('#helpBox').scrollTop($('#helpBox').children().height()); 
 
    }); 
 
}); 
 

 
function matches(text) { 
 
    var a1 = ['sales', 'sale', 'bargain']; 
 
    var a2 = ['info', 'information', '411']; 
 
    var a3 = ['contact', 'number', 'email', 'phone']; 
 
    var split = text.split(" "); 
 

 
    if (a1.includes(text)) { 
 
    var match = a1.includes(text); 
 
    return 1; 
 
    } else if (a2.includes(text)) { 
 
    var match2 = a2.includes(text); 
 
    return 2; 
 
    } else if (a3.includes(text)) { 
 
    var match3 = a3.includes(text); 
 
    return 3; 
 
    } 
 
}

#helpBtn { 
 
    color: black; 
 
    text-decoration: none; 
 
} 
 

 
#helpBox { 
 
    width: 100%; 
 
    height: 250px; 
 
    background-color: white; 
 
    overflow-y: auto; 
 
    display: none; 
 
    z-index: 1000; 
 
} 
 

 
#textarea { 
 
    position: absolute; 
 
    width: 100%; 
 
    margin-top: -23px; 
 
    display: none; 
 
} 
 

 
#usrText { 
 
    line-height: 1.4; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<ul class="nav nav-pills nav-justified"> 
 
    <li role="presentation" class="dropdown"> 
 
    <a id="helpBtn" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"> 
 
      Help<span class="caret"></span></a> 
 
    <ul class="dropdown-menu"> 
 
     <div id="helpBox"> 
 
     <span id="usrText"></span> 
 
     </div> 
 
     <input id="textarea" placeholder="Type Here" maxlength="15"> 
 
    </ul> 
 
    </li>