like button for every video

hello, iam trying to do a video player project for that i would like to keep like buttons and i have did that for all videos in only one single page but my problem is i kept one id for all videos  calling function for all videos but while im hitting like button it is counting for only one video like button not for another like button please help me
<html>
<head>
<script>
var Clicks = 0 ;
function AddClick(){
Clicks = Clicks + 1;
document.getElementById('CountedClicks').innerHTML = Clicks + ' Hits';
}
</script>
</head>

<body>
<button id="CountedClicks" type="button"></button><br>
<button style="background-color:green" >Count Your Hit</button>
<br>
<button id="CountedClicks" type="button"></button><br>
<button style="background-color:blue" onclick="AddClick()">Count Your Hit</button>
</body>

</html>

Open in new window

sai kiran reddyAsked:
Who is Participating?
 
Chris StanyonCommented:
OK. Nothing in your code resembles a video - all you have is 4 buttons, so I'm going to take a guess here. Basically, wrap each video and button in a div to make it slightly easier. The following code is using jQuery (just because I find it easier to use), so make sure you include the jQuery library in your document. Your HTML would look something like this:

<div class="video">
    <button class="like">Like [<span>0</span>]</button>
</div>

<div class="video">
    <button class="like">Like [<span>0</span>]</button>
</div>

Open in new window

And the Javascript to make it work would look something like this:

$(document).ready(function() {
    $('.like').click(function() {
        counter = $(this).children('span');
        counter.text(parseInt(counter.text()) + 1);
    });
}); 

Open in new window

You can see a working demo here -> https://jsfiddle.net/ChrisStanyon/04aqdebz/
0
 
Chris StanyonCommented:
Not sure what you're after, but you can't use the same ID more than once in a page - it has to be unique.

If you can explain what you need we can probably help you out.
1
 
sai kiran reddyAuthor Commented:
Thank you Chris Stanyon, my problem is how to give counter like button for different videos different like buttons different counting .... like if you like one one video another video is been liked that should not happen ... which video iam liking that video only b liked
0
 
sai kiran reddyAuthor Commented:
hey Chris Stanyon
i need permanent hit counter could you please help me for the same question
0
 
Chris StanyonCommented:
There would be quite a few moving parts to implement a permanent hit counter. You would need some form of persistent storage, probably a database. You would need to give each of your videos a unique ID. You would need to write an AJAX script to push the video ID back to the server to be stored in the DB. You would need to query the database on your video page to show the current number of likes. You may also want to implement some form of checks to stop the same person continuously clicking on the like button.

It's not a simple one-answer solution. You would need to plan it out properly and then implement all the various moving parts.

My advice would be to do a Google search on how best to achieve this using something like PHP / jQuery. That should give you some good ideas on how you want to implement it. You can then come back to EE to ask specific questions about any of the parts you're struggling with.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.