我需要添加事件侦听器方面的帮助

Question

我有一个 Django 模板，我真的想使用 JavaScript。我尝试在线阅读寻求帮助，但我仍然不明白。

我想在下面的代码中添加一个

addEventListener()

方法：

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

另外，我希望它在提交时显示响应；回复如“请求已发送”。我知道

console.log()

，但我不希望它出现在

console.log()

中。

Answer 1

您需要一个空间来显示“请求已发送”消息。这里我使用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

Answer 2

做这个

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>

Answer 3

所以大概您想向按钮添加一个事件侦听器，以便单击时提交。您可以通过向两个脚本标签

<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