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

这是因为您在点击按钮时在.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;

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

JavaScript 事件按钮 onclick 仅有效一次

JavaScript event button onclick works only one time

html

javascript

chat

onclick