我想从按钮发出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 = "";
};
&#13;
<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>
&#13;
如果您尝试使用此代码,它会运行一次,但之后它就再也无法运行了。它似乎并没有激发这一事件。
答案 0 :(得分:2)
这是因为当您单击按钮时,您正在重新创建.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;