Мне нужна помощь в добавлении слушателя событий
Я разработчик 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