How to get data attribute with "onclick" method?

Question

I have following two "div" with "anchor" tag and i want to get "attribute" with "onclick" function,Here is my html code

<div class="upvote_dm">
<a class="pr_vote_up '.$clssup.' btnsnew '.$FeedId.'" data-datac="1" data-flagid='.$FeedId.' id=Up'.$FeedId.' data-type="feed" data-datacw='.$UserWalletAddress.' href="#"  data-id="10" onclick="return AddFeedVotes()"></a>
<span id="UpVoteCount'.$FeedId.'">'.$DefaultUpVotes.'</span>
</div>
                   
<div class="downvote_dm">
<a class="pr_vote_down '.$clssdown.' btnsnew '.$FeedId.'" data-datac="0" data-status="Down'.$FeedId.'" data-flagid='.$FeedId.' id=Down'.$FeedId.' data-type="feed" data-datacw='.$UserWalletAddress.' href="#" data-id="10" onclick="return AddFeedVotes()"></a>
<span id="DownVoteCount'.$FeedId.'">'.$DefaultDownVotes.'</span>
</div>

Now i am trying to get attribute with following way but showing me "Undefine",Where i am wrong ?

<script>
       function AddFeedVotes()
            {
                var vote = $(this).data('datac');
                var type = $(this).data('type');
                var flagid = $(this).data('flagid');
                            
                alert(vote);
                alert(type);
                 alert(flagid);    
            }
</script>

Why are you use "return AddFeedVotes()" onclick? Why not just "AddFeedVotes()"? — silentwasd
– silentwasd, Commented Nov 15, 2021 at 10:59
And you don't need to use jquery. You can just type: this.dataset.datac — silentwasd
– silentwasd, Commented Nov 15, 2021 at 11:00
@МихаилТихонов: can you write "right" code so i can check your code — sheetal baveja
– sheetal baveja, Commented Nov 15, 2021 at 11:03
If you are using Jquery, why don't you use .on('click', .... )? — Gert B.
– Gert B., Commented Nov 15, 2021 at 11:05
@Gert B: i tried but with in that case "click" was working more than one time instead of "only one" , thats why i am trying with some different way — sheetal baveja
– sheetal baveja, Commented Nov 15, 2021 at 11:07

WindRunnerMax · Accepted Answer · 2021-11-15 11:11:16Z

6

Maybe you can try native javascript

document.querySelector("#btn").addEventListener("click", event => {
  console.log(event.target.dataset.a)
})

<button data-a="111111" id="btn">button</button>

answered Nov 15, 2021 at 11:11

WindRunnerMax

1093 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Noufal Binu Over a year ago

how to use multiple elements.

WindRunnerMax Over a year ago

Multiple elements can try event delegation based on event bubbling

silentwasd · Accepted Answer · 2021-11-15 11:13:04Z

1

So main problem is that onclick="return AddFeedVotes()" you don't put this argument: return AddFeedVotes(this), because this in that context is element.

Html:

<div class="upvote_dm">
<a class="pr_vote_up '.$clssup.' btnsnew '.$FeedId.'" data-datac="1" data-flagid='.$FeedId.' id=Up'.$FeedId.' data-type="feed" data-datacw='.$UserWalletAddress.' href="#"  data-id="10" onclick="return AddFeedVotes(this)"></a>
<span id="UpVoteCount'.$FeedId.'">'.$DefaultUpVotes.'</span>
</div>
                   
<div class="downvote_dm">
<a class="pr_vote_down '.$clssdown.' btnsnew '.$FeedId.'" data-datac="0" data-status="Down'.$FeedId.'" data-flagid='.$FeedId.' id=Down'.$FeedId.' data-type="feed" data-datacw='.$UserWalletAddress.' href="#" data-id="10" onclick="return AddFeedVotes(this)"></a>
<span id="DownVoteCount'.$FeedId.'">'.$DefaultDownVotes.'</span>
</div>

Here just removed jquery, because native way more lighter.

JS:

function AddFeedVotes(e)
{
  let vote = e.dataset.datac;
  let type = e.dataset.type;
  let flagid = e.dataset.flagid;
                            
  alert(vote);
  alert(type);
  alert(flagid);    
}

edited Nov 15, 2021 at 11:13

answered Nov 15, 2021 at 11:07

silentwasd

3371 silver badge7 bronze badges

3 Comments

Nico Haase Over a year ago

Please add some explanation to your answer such that others can learn from it

sheetal baveja Over a year ago

@silentwasd: i want to send more attribute but unable to send,How i can send "datacw" and "id" also ?

silentwasd Over a year ago

@sheetalbaveja same way: let datacw = e.dataset.datacw; let id = e.dataset.id;

Freedom Rider · Accepted Answer · 2021-11-15 11:14:44Z

In your code you didn't added anything for a tag.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <div class="upvote_dm">
        <a  id="upVote" class="pr_vote_up '.$clssup.' btnsnew '.$FeedId.'" data-datac="1" data-flagid='.$FeedId.' id=Up'.$FeedId.' data-type="feed" data-datacw='.$UserWalletAddress.' href="#"  data-id="10" onclick="return AddFeedVotes()">Up vote</a>
        <span>'.$DefaultUpVotes.'</span>
    </div>

    <div class="downvote_dm">
        <a id="downVote" class="pr_vote_down '.$clssdown.' btnsnew '.$FeedId.'" data-datac="0" data-status="Down'.$FeedId.'" data-flagid='.$FeedId.' id=Down'.$FeedId.' data-type="feed" data-datacw='.$UserWalletAddress.' href="#" data-id="10" >Down vote</a>
        <span >'.$DefaultDownVotes.'</span>
    </div>
</body>
</html>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script type="text/javascript">

    $('#upVote, #downVote').click(function(event) {
        var vote = $(this).data('datac');
        var type = $(this).data('type');
        var flagid = $(this).data('flagid');

        alert(vote);
        alert(type);
        alert(flagid);  
    });


</script>

Oliver Trampleasure · Accepted Answer · 2021-11-15 11:19:51Z

You haven't linked your inline calling of the function with the specific element, and therefore cannot reference the data attributes.

You can add a click event using a new class as I have done below, if you add .vote to your links then add a click event to them all using jquery.

$("a.vote").click( function() {
   // code goes here
});

You will need to distinguish up or down votes later in your code, but could use:

if ($(this).hasClass('pr_vote_down')) {
   // down vote code
} else {
   // up vote code
}

// Add click event to all a tags with class vote
$("a.vote").click(function() {

  // No you can use $(this) as you have linked the function to the specific element rather than calling it in the absract.
  var vote = $(this).data('datac');
  var type = $(this).data('type');
  var flagid = $(this).data('flagid');

  // Check if the clicked link has the down vote class
  if ($(this).hasClass('pr_vote_down')) {
    // down vote code
    alert("down vote");
  } else {
    // up vote code
    alert("up vote");
  }

  alert(vote);
  alert(type);
  alert(flagid);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="upvote_dm">
  <a class="pr_vote_up vote '.$clssup.' btnsnew '.$FeedId.'" data-datac="1" data-flagid='.$FeedId.' id=Up '.$FeedId.' data-type="feed" data-datacw='.$UserWalletAddress.' href="#" data-id="10">Up Vote</a>
  <span id="UpVoteCount'.$FeedId.'">'.$DefaultUpVotes.'</span>
</div>

<div class="downvote_dm">
  <a class="pr_vote_down vote '.$clssdown.' btnsnew '.$FeedId.'" data-datac="0" data-status="Down'.$FeedId.'" data-flagid='.$FeedId.' id=Down '.$FeedId.' data-type="feed" data-datacw='.$UserWalletAddress.' href="#" data-id="10">Down Vote</a>
  <span id="DownVoteCount'.$FeedId.'">'.$DefaultDownVotes.'</span>
</div>

otejiri · Accepted Answer · 2021-11-15 11:21:51Z

First place your span in the anchor tag

$('a[data-type="feed"]').click(function(event) {
    var vote = $(this).data('datac');
    var type = $(this).data('type');
    var flagid = $(this).data('flagid');

    alert(vote);
    alert(type);
    alert(flagid);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<div class="upvote_dm">
<a class="pr_vote_up '.$clssup.' btnsnew '.$FeedId.'" data-datac="1" data-flagid='.$FeedId.' id=Up'.$FeedId.' data-type="feed" data-datacw='.$UserWalletAddress.' href="#"  data-id="10"><span id="UpVoteCount'.$FeedId.'">'.$DefaultUpVotes.'</span></a>

</div>
                   
<div class="downvote_dm">
<a class="pr_vote_down '.$clssdown.' btnsnew '.$FeedId.'" data-datac="0" data-status="Down'.$FeedId.'" data-flagid='.$FeedId.' id=Down'.$FeedId.' data-type="feed" data-datacw='.$UserWalletAddress.' href="#" data-id="10" ><span id="DownVoteCount'.$FeedId.'">'.$DefaultDownVotes.'</span></a>

</div>

Collectives™ on Stack Overflow

How to get data attribute with "onclick" method?

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

3 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related