我需要有关添加事件侦听器的帮助

Question

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

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

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

此外，我希望它在提交时显示回复。回复如“请求已发送”。请让我了解 console.log，我不想在 console.log 中使用它。

我知道 JS 很擅长这个。

Answer 1

做这个

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 2

所以您可能想为按钮添加一个事件侦听器，以便在单击时提交。您可以通过向两个脚本标记 <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

Answer 3

您需要 space 才能显示消息“请求已发送”。这里我使用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 上的 link：https://www.w3schools.com/jsref/met_document_addeventlistener.asp

我需要有关添加事件侦听器的帮助

I want help in adding an event listener

html

javascript

forms

django

addeventlistener