JSFiddle - React, Tailwind, and code Playground
HTML
<aside id="like">
<img onclick="_like()" src="http://img2.wikia.nocookie.net/__cb20120118234601/callofduty/images/c/cf/Facebook_like_buton.png" alt="J'aime"/>
<img onclick="_dislike()" src="http://www.hiremedia.uk/dev/wp-content/uploads/2015/01/Facebook-dislike-png.png" alt="Je N'aime Pas"/>
<input id="ilosc" readonly="readonly" value="5891" />
</aside>
CSS
#like {
text-align: center;
}
#like img {
max-width: 50px;
max-height: 50px;
}
#like img:hover {
transform: scale(1.1);
}
#like input {
display: block;
margin: 5px auto;
}
input {
border: 0;
text-align: center;
font-weigh: bold;
font-size: 2em;
padding: 0;
background-color: #FFF;
}
JavaScript
_val = document.getElementById('ilosc').value;
_klikniete = false;
function _like() {
if(!_klikniete) {
_val = document.getElementById('ilosc').value;
document.getElementById('ilosc').value = parseInt(_val) + 1;
_klikniete = true;
}
else
alert("Déjà vous avez donné voix!");
}
function _dislike() {
if(!_klikniete) {
_val = document.getElementById('ilosc').value;
document.getElementById('ilosc').value = parseInt(_val) - 1;
_klikniete = true;
}
else
alert("Déjà vous avez donné voix!");
}