Getting undefined when fetching data attriibute

Question

I am trying to get the data attribute 'status' of the button when it is clicked.

But what I get is undefined.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="action-buttons">
  <button id="pendingBtn" data-status="pending">Pending</button>
  <button id="returnedBtn" data-status="returned">Returned</button>
  <button id="admittedBtn" data-status="admitted">Admitted</button>
  <button id="rejectedBtn" data-status="rejected">Rejected</button>
  <button id="allBtn" data-status="all">All</button>
</div>
<p id="print"></p>
<script>
  $(document).ready(() => {
    $(".action-buttons").find("button").on('click', () => {
      //console.log($(this).attr("data-status"));
     $("#print").text($(this).attr("data-status"));
    });
  });
</script>

Relevant: [Are 'Arrow Functions' and 'Functions' equivalent / interchangeable?](https://stackoverflow.com/questions/34361379/are-arrow-functions-and-functions-equivalent-interchangeable) — freedomn-m, Feb 04 '22 at 09:01

score 1 · Accepted Answer · answered Feb 04 '22 at 07:26

There was multiple problems with your code.

First, you missed a . before you on('click'
Second, this does not work with arrow functions, so you can do it like 'click', (obj) => and obj.target

Also rather than doing $(".action-buttons").find("button") you can just combine them like $(".action-buttons button")

$(document).ready(() => {
  $(".action-buttons").find("button").on('click', (obj) => {
    $("#print").text($(obj.target).attr("data-status"));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="action-buttons">
  <button id="pendingBtn" data-status="pending">Pending</button>
  <button id="returnedBtn" data-status="returned">Returned</button>
  <button id="admittedBtn" data-status="admitted">Admitted</button>
  <button id="rejectedBtn" data-status="rejected">Rejected</button>
  <button id="allBtn" data-status="all">All</button>
</div>
<p id="print"></p>

I forgot about that part, that it doesn't work with arrow functions, thank you. — Jerwin Mathew Aton, Feb 04 '22 at 07:29

Getting undefined when fetching data attriibute

1 Answers1