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>
CodePudding user response：
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>CodePudding user response：
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>CodePudding user response：
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);
}
CodePudding user response：
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>
CodePudding user response：
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>