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

버튼을 클릭하면 HTML이 (. 단추가 포함 된) 다시 작성되고 이벤트가 손실 될 수 있기 때문에 .chatOutput 내부에서 HTML을 다시 만들기 때문입니다.

이 문제를 해결하는 데는 여러 가지 방법이 있습니다. 하나는 함수를 호출하는 명명 된 함수로 만들고 함수의 끝에 chatSubmit = document.getElementById("chatSubmit"); chatSubmit.onclick = myFunctionName;을 추가하는 것입니다.

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

는 그러나, 나는 일을 더 좋은 방법은 그냥, 응답을 저장하기 위해 별도의 사업부를 사용과 같이하는 것입니다 생각