2016-04-30 6 views
0

私は自分のプロジェクトを完成させていますが、擬似的なサーバレスポンスを取得しようとしています。全体のアイデアは、両方のメッセージがチャットボックス領域に表示されるはずです。今、ハードコードは表示されていません。ここに私のJavaScript/jQueryのは、次のとおりです。ここHTML5 jQueryハードコードされたレスポンスのチャットボックスインターフェイス

<script> 
$(document).ready(function(){ 
    $('#submitmsg') 
     .bind('click', function(){ 
     var message = $('#usermsg').val(); 
     $('#chatbox').append('<p>' + message + '</p>'); 
     $('#usermsg').val(''); 
    }); 
     .bind('click', function(){ 
     var message = $('#usermsg').val(); 
     $('#chatbox').append('<p>' + message + '</p>'); 
     $('#usermsg').val(''); 
    }); 
    </script> 

は、いくつかの私のhtmlです:

<body> 
<div id="wrapper"> 
    <div id="menu"> 
    <p class="welcome">Welcome</p> 
    <p class="logout"><a id="exit" href="window.top.close();">Exit Chat</a></p> 
    <div style="clear:both"></div> 
</div> 

<div id="chatbox"> 
    <p>Here's our chat data</p> 
</div> 

<form name="message"> 
    <input name="usermsg" type="text" id="usermsg" size="63" /> 
    <button type="button" id="submitmsg" value="send">Send</button>  
</form> 

私は最初のメッセージなどにコード化された応答を結びつけるために.bindメソッドを使用しようとしていますメッセージはチャットボックスに同時に出力されるが、それはそうではない。

+0

それはあなたがここで達成しようとしているものは明らかではないですが、あなたのコードを持ついくつかの問題があります。 1)document.ready関数(中括弧がない)を閉じていない、2)2番目のバインドが何にもバインドされていない、3)最初のバインドと同じです。あなたが参照する「ハードコードされた応答」はどこですか? https://jsfiddle.net/erresen/hwq69dew/ – Erresen

+0

2番目のバインドは最初と同じメッセージをエコーのように出力することが私の希望でした。あるいは、計画Bは、出力されるべき事前定義されたメッセージをタイプすることである。 – phoenixCoder

答えて

1

どうやってこのようなことができますか?

jsfiddle Demo

$(document).ready(function() { 
 
    $('#submitmsg') 
 
    .bind('click', function() { 
 
     var message = $('#usermsg').val(); 
 
     $('#chatbox').append('<p>' + message + '</p>'); 
 
     $('#usermsg').val(''); 
 
     serverResponse(message); 
 
    }); 
 
}); 
 

 
function serverResponse(message) { 
 
    $('#chatbox').append('<p>Server: ' + message + '</p>'); 
 
}
<div id="menu"> 
 
    <p class="welcome">Welcome</p> 
 
    <p class="logout"><a id="exit" href="javascript:window.top.close();">Exit Chat</a></p> 
 
    <div style="clear:both"></div> 
 
</div> 
 
<div id="chatbox"> 
 
    <p>Here's our chat data</p> 
 
</div> 
 
<form name="message"> 
 
    <input name="usermsg" type="text" id="usermsg" size="63" /> 
 
    <button type="button" id="submitmsg" value="send">Send</button> 
 
</form>

+0

これは完璧です。ありがとうございます。私のexitボタンは、あなたがそれについての推奨事項がありますか? – phoenixCoder

+0

問題ありません。 exitボタンのhrefに 'javascript:'ビットがありません。 '' href = "javascript:window.top.close();" ' – Erresen

+0

これを追加すると、今何もしていないようです。 – phoenixCoder

関連する問題