JavaScript Event Button Onclick funktioniert nur einmal

Question

Ich möchte ein Onclick-Ereignis von einer Schaltfläche aus feuern. Das Ereignis wird in einer separaten JavaScript-Datei deklariert.

Der Code muss einen Chat reproduzieren. Wenn ich ersten Text sende, funktioniert es gut, aber wenn ich versuche, etwas erneut zu senden (zweiter Text), wird es nicht ausgelöst.

Die HTML-Datei enthält:

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>

Wenn Sie diesen Code versuchen, funktioniert es einmal, aber nach, dass es nicht mehr funktioniert. Es scheint, dass das Ereignis nicht ausgelöst wird.

Answer 1

Das liegt daran, dass Sie die HTML-Datei in .chatOutput neu erstellen, wenn Sie auf die Schaltfläche klicken, damit der HTML-Code (der die Schaltfläche enthält) neu geschrieben wird und das Ereignis verloren geht.

Dafür gibt es verschiedene Möglichkeiten. Eine wäre, die Funktion zu einer benannten Funktion zu machen, die Sie aufrufen, und am Ende Ihrer Funktion chatSubmit = document.getElementById("chatSubmit"); chatSubmit.onclick = myFunctionName; hinzuzufügen.

Aber ich denke, eine schönere Art und Weise zu tun, es ist nur einen extra div zu verwenden, um die Antwort zu speichern, etwa so:

<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; 

Fiddle: https://jsfiddle.net/r0gm30mr/