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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chris StanyonWebDevCommented:
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
Chris StanyonWebDevCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
sai kiran reddyAuthor Commented:
hey Chris Stanyon
i need permanent hit counter could you please help me for the same question
0
Chris StanyonWebDevCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.