[英]JavaScript event button onclick works only one time
我想从按钮触发一个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>
如果您尝试使用此代码,它将只能运行一次,但此后将不再运行。 看来它不会触发该事件。
这是因为单击按钮时您正在.chatOutput内部重新创建html,所以HTML(包括按钮)被重写,事件丢失。
有多种解决方法。 一种是使函数成为您调用的命名函数,然后添加chatSubmit = document.getElementById("chatSubmit"); chatSubmit.onclick = myFunctionName;
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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.