JavaScript事件按钮onclick只工作一次

我想从按钮触发onclick事件。事件在单独的JavaScript文件中声明

代码必须重现聊天记录。如果我发送第一条文本，它工作正常，但如果我尝试再次发送（第二条文本），它不会启动

html文件包含：

var chatOutputDiv=document.getElementById（“chatOutput”）；
chatSubmit.onclick=函数（）{
//创建一个Json对象，其中“displayname”为显示名称，“messageText”为消息。
//“displayname”取自URL，消息取自元素输入。
//var chatMessage={“displayname”：getURLParameter（“displayname”），“messageText”：chatInput.value}；
//我们通过“聊天”频道发送数据，该频道目前是硬编码的
//在以后的版本中，我们允许自定义通道命名。
//会议发送数据（“聊天”，聊天信息）；
//在当前聊天中发送文本
chatOutputDiv.innerHTML+=“
用户：消息”；
//清除聊天输入
chatInput.value=“”；
};
这是因为当您单击按钮时，您正在.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;


var chatOutputDiv=document.getElementById（“chatOutput”）
var chatSubmit=document.getElementById（“chatSubmit”）
var chatResponse=document.getElementById（“chatResponse”）；
var chatInput=document.getElementById（“chatInput”）；
函数foobar（）{
chatResponse.innerHTML+=“
用户：”+chatInput.value；
chatInput.value=“”；
}
chatSubmit.onclick=foobar；

Fiddle:
这是因为您在.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;


var chatOutputDiv=document.getElementById（“chatOutput”）
var chatSubmit=document.getElementById（“chatSubmit”）
var chatResponse=document.getElementById（“chatResponse”）；
var chatInput=document.getElementById（“chatInput”）；
函数foobar（）{
chatResponse.innerHTML+=“
用户：”+chatInput.value；
chatInput.value=“”；
}
chatSubmit.onclick=foobar；

小提琴：