我需要帮助添加事件侦听器答案

【问题标题】：I want help in adding an event listener我需要帮助添加事件侦听器
【发布时间】：2022-01-27 09:55:40
【问题描述】：

我是 django 开发人员，不擅长 javascript。我有一个 django 模板，我真的很想使用 Javascript。我尝试在线阅读以寻求帮助，但我不明白

我想在下面的代码中添加addEventlistener

<div class="box-element hidden" id="request-info">
        <button id="send-payment">Send request</button>

另外，我希望它在提交时显示响应。类似“请求已发送”的响应。请让我知道console.log，我不希望它出现在console.log。

我知道 JS 真的很擅长这个。

【问题讨论】：

这能回答你的问题吗？ addEventListener vs onclick

标签： javascript html django forms addeventlistener

【解决方案1】：

所以大概你想为按钮添加一个事件监听器，以便它在点击时提交。您可以通过在两个脚本标签<script></script> 之间或在您的.js 文件中的元素中添加一个事件侦听器来解决此问题。代码如下所示：

document.getElementById("send-payment").addEventListener("click", function() {
     /*
          Action Here...
     */
     alert("Request Sent!") // This will throw up an alert to the user.
})

据我所知，这应该是一个简单的解决方案，您可以在此处找到更多文档： https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

【讨论】：

【解决方案2】：

您需要一个空间来显示“请求已发送”消息。这里我使用p标签

<div class="box-element hidden" id="request-info">
  <button id="send-payment">Send request</button>
  <p id="response"></p>
<script>
 document.getElementById("send-payment").addEventListener("click", function(){
 document.getElementById("response").innerHTML = "Request sent";
})
</script>

这是 w3schools 上的链接：https://www.w3schools.com/jsref/met_document_addeventlistener.asp

【讨论】：

【解决方案3】：

做这个

const button = document.getElementById("send-payment");

button.addEventListener("click", function() {
  document.getElementById("request-info").style.display = "block";
})

#request-info {
  display: none;
  color: green;
  font-size: 12px;
  margin-bottom: 10px;
}

<div id="request-info">Request sent</div>
<button id="send-payment">Send request</button>

【讨论】：