Прослушиватель событий Javascript получает значение
Я обновляю сайт, созданный кем-то другим. У меня есть календарь, и каждая дата в календаре имеет одинаковые значения.
<a class = "bkiavanae" href = "#" id = "selectiondate" data-dn = "02 May 2024" data-ct = "1-a">2<p style = "font-size: 10px">£110</p></a>
Все они имеют одинаковый класс и значение идентификатора. Я разместил событие, прослушивающее onClick при любых кликах по классу bkiavanae, и оно работает нормально.
Но мне нужно onClick, чтобы уловить значение data-dn. Итак, в этом примере нужно вернуть 2 мая 2024 г.
var calenderSelection = document.getElementsByClassName("bkiavanae");
for (var i = 0; i < calenderSelection.length ; i++) {
calenderSelection[i].addEventListener("click",
function (event) {
event.preventDefault();
//alert("hello");
},
false);
}
Не используйте var, используйте let (важно, чтобы это работало) и выполните поиск по теме «как получить значения данных HTML». У вас уже есть свой элемент calenderSelection[i]
var dataDnValue = event.currentTarget.dataset.dn
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Используйте event.target.getAttribute, чтобы получить значение атрибута data-dn:
var calendarSelection = document.getElementsByClassName("bkiavanae");
for (var i = 0; i < calendarSelection.length; i++) {
calendarSelection[i].addEventListener("click", function (event) {
event.preventDefault();
const dateValue = event.target.getAttribute("data-dn");
alert(dateValue);
}, false);
}
Вы не обрабатываете случай, когда пользователь щелкает элемент <p> внутри элемента <a>. В этом случае ваш код выдаст предупреждение о нулевом значении. См. мой ответ для проверки целевого элемента и доступа к родительскому элементу, когда это необходимо.
Вы можете получить это значение через this.getAttribute("data-dn"):
var calenderSelection = document.getElementsByClassName("bkiavanae");
for (var i = 0; i < calenderSelection.length ; i++) {
calenderSelection[i].addEventListener("click",
function (event) {
event.preventDefault();
alert(this.getAttribute("data-dn"));
},
false);
}<a class = "bkiavanae" href = "#" id = "selectiondate" data-dn = "02 May 2024" data-ct = "1-a">2<p style = "font-size: 10px">£110</p></a>
<a class = "bkiavanae" href = "#" id = "selectiondate" data-dn = "03 May 2024" data-ct = "1-a">3<p style = "font-size: 10px">£110</p></a>
<a class = "bkiavanae" href = "#" id = "selectiondate" data-dn = "04 May 2024" data-ct = "1-a">4<p style = "font-size: 10px">£110</p></a>!!!ПРЕДУПРЕЖДЕНИЕ!!!
Повторное использование одного и того же id для нескольких элементов является недопустимым HTML, поэтому я настоятельно советую вам либо удалить идентификаторы этих тегов, либо, если вам нужны id для них, убедиться, что они уникальны на странице.
Ваш HTML-код использует набор данных, поэтому вы можете использовать свойство набора данных для доступа к значению в вашем коде Javascript.
Не забудьте обработать случай, когда пользователь нажимает на элемент p (11 фунтов в вашем примере). С ответом @john вы получите ноль, если нажмете на элемент p. В этом фрагменте вы получите дату.
var calenderSelection = document.getElementsByClassName("bkiavanae");
for (var i = 0; i < calenderSelection.length ; i++) {
calenderSelection[i].addEventListener("click",
function (event) {
event.preventDefault();
//alert("hello");
if ( event.target.tagName == "A" ) {
console.info( `Data is: ${event.target.dataset.dn}`)
}
// If user clicked on the <p> element, then deal with it here.
else if ( event.target.parentElement.tagName == "A" ) {
console.info( `Data is: ${event.target.parentElement.dataset.dn}`)
}
},
false);
}<a class = "bkiavanae" href = "#" id = "selectiondate" data-dn = "02 May 2024" data-ct = "1-a">2<p style = "font-size: 10px">£110</p></a>Вы можете использовать свойство набора данных элемента, чтобы получить любой атрибут data-* по его имени.
Если вам нужен идентификатор (id = "selectiondate"), он должен быть уникальным. Либо удалите атрибут, ИЛИ превратите int в атрибут data-*, например data-id = "selectiondate". В примере я использую его для проверки того, был ли выбран правильный элемент.
const calendar_div = document.querySelector('.calendar');
calendar_div.addEventListener('click', e => {
switch(e.target.dataset.id){
case 'selectiondate':
e.preventDefault();
console.info(e.target.dataset.dn, e.target.dataset.ct);
break;
}
});<div class = "calendar">
<a class = "bkiavanae" href = "#" data-id = "selectiondate"
data-dn = "02 May 2024" data-ct = "1-a">2<p style = "font-size: 10px">£110</p></a>
<a class = "bkiavanae" href = "#" data-id = "selectiondate"
data-dn = "03 May 2024" data-ct = "1-a">3<p style = "font-size: 10px">£110</p></a>
</div>
Если у всех них одинаковый идентификатор, это недействительно: w3schools.com/html/….