JavaScript事件按鈕onclick只能使用一次

Question

我想從按鈕觸發一個onclick事件。該事件在單獨的JavaScript文件中聲明。

代碼必須重現聊天。如果我發送第一個文本，它可以正常工作，但如果我嘗試再次發送一些內容（第二個文本），它不會觸發。

HTML文件包含：

var chatOutputDiv = document.getElementById("chatOutput"); 
 
chatSubmit.onclick = function() { 
 
     // Create a Json object with "displayname" being the display name and "messageText" the message. 
 
     // "displayname" is taken from URL, message from element chatInput. 
 
     //var chatMessage = { "displayname": getURLParameter("displayName"), "messageText": chatInput.value }; 
 
     // We send data on the "chat", channel which is currently hard-coded 
 
     // in later versions we allow custom naming of channels. 
 
     //conference.sendData("chat", chatMessage); 
 
     // Send text in current chat 
 
     chatOutputDiv.innerHTML += "<br> user : message"; 
 
     // Clear chat input 
 
     chatInput.value = ""; 
 
    };

<div class="row"> 
 
    <div class="col-xs-12 col-lg-12 col-sm-12 col-md-12" align="center"> 
 
     <div id="chatOutput" style="height: 200px; width: 220px; overflow-y: scroll;"> 
 
      <input type="text" id="chatInput"/> 
 
      <input id="chatSubmit" type="button" value="Send"/> 
 
     </div> 
 
    </div> 
 
</div>

如果你試試這個代碼，它的工作原理有一段時間，但在這之後它不工作了。它似乎並沒有觸發該事件。

Answer 1

這是因爲當您單擊按鈕時，您正在重新創建.chatOutput中的html，因此HTML（包含按鈕）被重寫並且事件丟失。

有多種解決方法。一種方法是使函數成爲您調用的命名函數，並將chatSubmit = document.getElementById("chatSubmit"); chatSubmit.onclick = myFunctionName;添加到函數的末尾。

不過，我認爲這樣做的更好的方式是隻使用一個額外的div來存儲響應，就像這樣：

<div class="row"> 
<div class="col-xs-12 col-lg-12 col-sm-12 col-md-12" align="center"> 
    <div id="chatOutput" style="height: 200px; width: 220px; overflow-y: scroll;"> 
     <input type="text" id="chatInput"/> 
     <input id="chatSubmit" type="button" value="Send"/> 
     <div id="chatResponse"></div> 
    </div> 
</div> 
</div> 


var chatOutputDiv = document.getElementById("chatOutput") 
var chatSubmit = document.getElementById("chatSubmit") 
var chatResponse = document.getElementById("chatResponse"); 
var chatInput = document.getElementById("chatInput"); 

function foobar() { 
    chatResponse.innerHTML += "<br> user : " + chatInput.value; 
    chatInput.value = ""; 
} 

chatSubmit.onclick = foobar; 

小提琴：https://jsfiddle.net/r0gm30mr/