Witam.
Uczę się JavaScript od wczoraj, a dzisiaj napotkałem pewien problem.
Chcę stworzyć skrypty, które po naciśnięciu na przycisk zmienią tło na zielone lub czerwone (zależnie od klawisza, są dwa), dodatkowo będą podliczać ich ilość i wyświetlać obok (Na zasadzie plusów i minusów przy jakimś poście). Kolejnym warunkiem jest to, że jeśli klawisz A jest wciśnięty, to po naciśnięciu klawisza B chciałbym aby efekty klawisza A zostały cofnięte, a klawisza B zapisane.
Za pomocą różnych źródeł udało mi się stworzyć funkcje które nie spełniają jednak warunku z "odkliknięciem" drugiego przycisku, oraz nie zapisują ilości kliknięć. Oto pierwotny kod:
var voteUp = document.getElementsByClassName("like")[0];
voteUp.onclick = function(){
if (voteDown.style.backgroundColor ==="red"){
return;
}
if (voteUp.style.backgroundColor===""){
voteUp.style.backgroundColor = "green";
}
else
voteUp.style.backgroundColor = "";
};
var voteDown = document.getElementsByClassName("dislike")[0];
voteDown.onclick = function(){
if (voteUp.style.backgroundColor ==="green"){
function(){
};
}
if (voteDown.style.backgroundColor===""){
voteDown.style.backgroundColor = "red";
}
else
voteDown.style.backgroundColor = "";
};
A oto ten "ulepszony" który już po prostu nie działa, stąd pytanie, czy sposób w jaki ja chciałem to zrobić jest poprawny? Nie mogę też znaleźć błędu, który mógłby powodować, że to nie działa.
var counter = document.getElementByClassName("licznik")[0].innerHTML = 0;
function Votes(){
voteUp.onclick = function(){
if (document.getElementByClassName("dislike")[0].style.backgroundColor==="red")
document.getElementByClassName("dislike")[0].style.backgroundColor==="",
document.getElementByClassName("like")[0].style.backgroundColor="green",
document.getElementByClassName("licznik")[0]+2;
else
document.getElementByClassName("like")[0].style.backgroundcolor="green",
document.getElementByClassName("licznik")[0]++;
};
voteDown.onclick = function(){
if (document.getElementByClassName("like")[0].style.backgroundColor==="green")
document.getElementByClassName("like")[0].style.backgroundColor==="",
document.getElementByClassName("dislike")[0].style.backgroundColor==="red",
document.getElementByClassName("licznik")[0]-2;
else
document.getElementByClassName("dislike")[0].style.backgroundColor="red",
document.getElementByClassName("licznik")[0]--;
};
};
Dodaje używaną tutaj część HTML
<div class="foot">
<div class="vote">
<div class="like"></div>
<div class="dislike" ></div>
<div class="licznik"></div>
<script src="javascript.js"></script>
</div>
<div class="comment">
<a href="adres"></a>
</div>
</div>
Pozdrawiam
