Javascript 为什么按钮不会将文本区域中的文本附加到面板（引导）？

我试图用一个按钮触发一个事件，该按钮从文本区域获取文本，并使用引导框架（v.3.3.7）将其发送到面板。目前正在尝试使用Javascript中的事件侦听器来执行此操作，而不是为按钮指定“onclick”值

HTML:

发送

Javascript

var sendMessageButton = document.querySelector('#sendMessageButton');
var messageBar = document.querySelector('#messageBar');
var mainChatBox = document.querySelector('#mainChatBox');

sendMessageButton.addEventListener("click", function (event) {
         var message = messageBar.value;
         mainChatBox.innerHTML += message + "<br />";
    });

var sendMessageButton=document.querySelector（“#sendMessageButton”）；
var messageBar=document.querySelector（'#messageBar'）；
var mainChatBox=document.querySelector（“#mainChatBox”）；
sendMessageButton.addEventListener（“单击”），函数（事件）{
var message=messageBar.value；
mainChatBox.innerHTML+=message+“
”；
});

我试着使用这段代码和另一个版本进行调试，在这个版本中，我为按钮分配了一个“onclick”值，然后保留了它的函数

下面是一个链接，指向一篇reddit文章，其中包含该版本的代码，我试图找到一个解决方案，将“onclick”值指定给按钮，而不是使用EventListener

---

我需要知道为什么当按钮触发事件时，当使用带有“onclick”值分配给sendMessageButton的“button”标记的方法时，文本不会附加到mainChatBox，或者Javascript中的EventListener。

您发布的代码工作正常。我尝试了您的代码，正如您在本文中看到的，它似乎工作正常。试着看看控制台中是否有任何错误。这是个好消息。虽然这很奇怪，但是这个代码块在整个网页代码中似乎不起作用。可能是我在页面的其他地方创建的其他逻辑错误。您应该将其包装在文档或窗口的加载事件侦听器中。

var sendMessageButton = document.querySelector('#sendMessageButton');
var messageBar = document.querySelector('#messageBar');
var mainChatBox = document.querySelector('#mainChatBox');

sendMessageButton.addEventListener("click", function (event) {
         var message = messageBar.value;
         mainChatBox.innerHTML += message + "<br />";
    });