Question 389322 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript event listener get value

Hi I am updating a website someone else made.
I have a calendar and each date in the calendar has the same values

<a class="bkiavanae" href="#" id="selectiondate" data-dn="02 May 2024" data-ct="1-a">2<p style="font-size: 10px">£110</p></a>

All have the same class and id value.
I have placed an event listening to the onClick for any clicks on the class bkiavanae which is working fine.

But I need the on click to capture the value of the data-dn value. So in this example need it to return 02 May 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);

}

Tags:

4

Answers


  1. 0

    Use event.target.getAttribute to retrieve the value of the data-dn attribute:

    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);
}
    Login or Signup to reply.
  2. 0

    You can get that value via 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>

    !!!WARNING!!!

    Reusing the same id for multiple elements is invalid HTML, so I strongly advise you to either remove the ids of these tags, or, if you need some id for them, make sure they are unique in the page.

    Login or Signup to reply.
  3. 0

    Your html code is using a dataset, so you can use the dataset property to access the value in your Javascript code.

    Don’t forget to handle the case where the user clicks on the p element (£11 in your example). With @john’s answer you will get a null if you click on the p element. In this snippet you will get the date.

    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.log( `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.log( `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>
    Login or Signup to reply.
  4. 0

    You can use the dataset property on the element to get any of the data-* attributes by it’s name.

    If you need the id (id="selectiondate") they should be unique. Either delete the attribute OR turn int onto a data-* attribute like data-id="selectiondate". In the example I use it for testing if it is the right element that was clicked.

    const calendar_div = document.querySelector('.calendar');

calendar_div.addEventListener('click', e => {
  switch(e.target.dataset.id){
    case 'selectiondate':
      e.preventDefault();
      console.log(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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search