試圖用鼠標單擊事件響應代碼jQuery HTML5聊天框程序

我遇到了編碼學校項目聊天框程序的問題。我有3個與該計劃有關的問題。首先，我的聊天消息未在我的聊天框中正確發佈。其次，我希望能夠點擊退出並使其靠近窗口，但我不完全確定如何去做。最後，我希望聊天能夠迴應消息或至少有一個硬編碼的回覆。我正在研究如何做，我不太確定如何做到這一點。我有一個樣式表和HTML。這裏是我的html：試圖用鼠標單擊事件響應代碼jQuery HTML5聊天框程序

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <script src=http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js ></script> 
<link rel="stylesheet" type="text/css" href="jQuery.css"> 



//my issues seem to be in my Javascript between here************************************ 



<script type="text/javascript"> 
    $(document).ready(function(){ 
     $('#submitmsg').click(function(){ 
      var message = $('#usermsg').val() 
      var old = $('#chatbox').html() 

      $('#chatbox').html(old + '<p>' + message + '</p>'); 
     }); 
    }); 
</script> 
<script > 
    function close_window(url){ 
     var newWindow = window.open('', '_self', ''); //open the current window 
     window.close(url); 
    }; 
</script> 


//and here***************************************************************************** 
</head> 
<body> 
<div id="wrapper"> 
    <div id="menu"> 
     <p class="welcome">Welcome <b></b></p> 

//Possible issue here******************************************************************* 
     <p class="logout"><a id="exit" href="#" onclick="window.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" action=""> 
     <input name="usermsg" type="text" id="usermsg" size="63" /> 
     <input name="submitmsg" type="submit" id="submitmsg" value="Send" /> 
    </form> 
</div>  
</body> 
</html>

這裏是我的CSS：

body { 
font:12px arial; 
color: #222; 
text-align:center; 
padding:35px; } 

form, p, span { 
    margin:0; 
    padding:0; } 

input { 
    font:12px arial; } 

a { 
    color:#0000FF; 
    text-decoration:none; } 

a:hover { 
    text-decoration:underline; } 

#wrapper, #loginform { 
    margin:0 auto; 
    padding-bottom:25px; 
    background:#EBF4FB; 
    width:75%; 
    border:1px solid #ACD8F0; } 

#loginform { 
    padding-top:18px; } 

#loginform p { 
    margin: 5px; } 

#chatbox { 
    text-align:left; 
    margin:0 auto; 
    margin-bottom:25px; 
    padding:10px; 
    background:#fff; 
    height:270px; 
    width:430px; 
    border:1px solid #ACD8F0; 
    overflow:auto; } 

#chatbox p { 
    padding:1em; 
    margin:1em; 
    background:#E6E6E6; 
    border:1px solid #BDBDBD; 
    -moz-border-radius:4px; 
} 

#usermsg { 
    width:395px; 
    border:1px solid #ACD8F0; } 

#submit { 
    width: 60px; } 


.welcome { 
    float:left; } 

.logout { 
    float:right; } 

.msgln { 
    margin:0 0 2px 0; }

一些CSS是不必要的我敢肯定，但是當我試圖採取一些出來就引起問題。任何幫助是極大的讚賞。

來源

2016-04-26 phoenixCoder

你可以發佈足夠的代碼，只關注一個問題，而不是向其他人拋出一些代碼並尋求修復。 – randominstanceOfLivingThing

不確定預期的結果是什麼？ – guest271314

我的預期結果是輸入消息在'聊天室'區域發佈。此外，我試圖讓窗口關閉後點擊退出聊天。此外，我真的不知道如何回顯輸入消息。 – phoenixCoder

請嘗試複製以下內容 - 我將樣式放入頭部，將javascript移至末尾，並交換輸入的按鈕。這與onclick有關，並將新評論添加到聊天窗口中。它的工作原理，但可以做得更好，也沒有解決關閉窗口的問題，但這確實會將新評論發佈到聊天區域。

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" ></script> 
<style> 
body { 
font:12px arial; 
color: #222; 
text-align:center; 
padding:35px; } 

form, p, span { 
    margin:0; 
    padding:0; } 

input { 
    font:12px arial; } 

a { 
    color:#0000FF; 
    text-decoration:none; } 

a:hover { 
    text-decoration:underline; } 

#wrapper, #loginform { 
    margin:0 auto; 
    padding-bottom:25px; 
    background:#EBF4FB; 
    width:75%; 
    border:1px solid #ACD8F0; } 

#loginform { 
    padding-top:18px; } 

#loginform p { 
    margin: 5px; } 

#chatbox { 
    text-align:left; 
    margin:0 auto; 
    margin-bottom:25px; 
    padding:10px; 
    background:#fff; 
    height:270px; 
    width:430px; 
    border:1px solid #ACD8F0; 
    overflow:auto; } 

#chatbox p { 
    padding:1em; 
    margin:1em; 
    background:#E6E6E6; 
    border:1px solid #BDBDBD; 
    -moz-border-radius:4px; 
} 

#usermsg { 
    width:395px; 
    border:1px solid #ACD8F0; } 

#submit { 
    width: 60px; } 


.welcome { 
    float:left; } 

.logout { 
    float:right; } 

.msgln { 
    margin:0 0 2px 0; } 
    </style> 
</head> 
<body> 
<div id="wrapper"> 
    <div id="menu"> 
     <p class="welcome">Welcome</p> 
     <p class="logout"><a id="exit" href="#" onclick="window.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> 
</div> 

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

function close_window(url){ 
     var newWindow = window.open('', '_self', ''); //open the current window 
     window.close(url); 
    }; 
</script> 

</body> 
</html>

來源

2016-04-26 03:26:46 gavgrif

這是非常感謝。我將如何添加回聲，以便重複輸入回給我的消息？ – phoenixCoder

對不起 - 我不知道 - 如果你在輸入信息中輸入例如「test」，它會把「test」放入窗口中。這不是你想要的嗎？「你是什麼意思」回顯給你？ – gavgrif

我想程序重複我的消息，就像是服務器回覆 – phoenixCoder

一個問題是，您使用的表單然後發佈到同一頁面 - 重新加載它。我複製你的代碼到一個testpage（稱爲chatTest.html），並點擊發送按鈕後，得到了以下網址：

chatTest.html?usermsg=test+message&submitmsg=Send

您的郵件根本才能發佈到聊天部分，但隨後刪除時重新加載頁面。因爲你沒有指定一個方法 - 它將它視爲一個獲取表單並將該消息作爲附加到url的查詢字符串發佈。

如果您打算將註釋保存到數據庫，那麼您應該將表單的操作更改爲不同的php頁面，處理結果並將保存的內容返回到聊天部分 - 可能使用Ajax，以便您不必在每次聊天提交時重新加載頁面。

來源

2016-04-26 03:10:49 gavgrif

我還沒有學會使用PHP，我只是在學習Ajax。我將如何處理你所描述的內容？ – phoenixCoder

非常感謝。我將如何添加回聲，以便重複輸入回給我的消息？ – phoenixCoder

我如何編碼以迴應用戶輸入？ – phoenixCoder

試圖用鼠標單擊事件響應代碼jQuery HTML5聊天框程序

回答

相關問題