Мне нужна помощь в добавлении слушателя событий

Я разработчик 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 действительно хорош в этом.

Сделайте это

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>

Итак, предположительно вы хотите добавить слушатель событий к кнопке, чтобы она отправлялась при нажатии. Вы можете сделать это, добавив слушатель событий к элементу между двумя тегами script <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

Для отображения сообщения "Запрос отправлен" нужно место. Здесь я использую тег 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

Вернуться на верх