Nie jestem pewny czy dobrze rozumiem funkcje

Question

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

Comments

Pokaz jeszcze kod HTML, żeby można było przetestować całość.

Linie 15-16 z pierwszego bloczka powinny rzucać SyntaxError, że nie możesz tworzyć function statement bez nadania jej nazwy. Poza tym, co w tym miejscu miało by się zadziać (gdy voteUp ma zielony kolor tła)?

W drugim bloczku linie 8, 12, 18 i 22 są bez sensu - próbujesz wykonać operacje arytmetyczne: dodawanie i inkrementacja oraz odejmowanie i dekrementacja na elemencie DOM? Jeśli już, to powinieneś najpierw (w wyższym scope) przypisać element o klasie licznik do zmiennej, na której będziesz ustawiać wartość liczbową w zależności od jakiegoś warunku i dopiero tą zmienną przypisywać (jako property textContent lub innerHTML) do elementu DOM.

Poza tym, dlaczego w ifach używasz przecinków, zamiast objąć to klamrami? I, w ogóle, przypisz sobie na górze wszystkie elementy DOM do zmiennych, a później operuj na referencjach, żebyś nie musiał przy każdej operacji szukać tych elementów w DOM (document.getElementsBy*).

---

Dziękuję za odpowiedź

W moim zamyśle linie 15-16 miały sprawdzać, czy tło jest zielone, jeśli tak to miały je usunąć, a drugiemu przyciskowi nadać czerwone i odjąć od licznika 2.

Jeśli chodzi o operacje arytmetyczne to faktycznie zrobiłem błąd, jak pisałem za pierwszym razem to wydawało się to logiczne, nie wspominając, że operacje były źle wykonane.

Poprawiłem i przypisałem elementy do zmiennych.

Na początku używałem średników, ale wyrzuciło mi błąd przy "else". I co masz na myśli, mówiąc, żebym objął  je klamrami?

Answer 1

Znaki porównania  jak ("===") używa się w warunkach, więc musisz poprawić kod dając "===" tylko w if (w innych przypadkach niż porównanie to piszesz znak przypisania "="). Poza tym jak chcesz zmieniać wartości to musisz przypisywać je do czegoś. O ile x++ i x-- działa bezproblemowo to x-2 i x + 2 nie nadpiszą Ci wartości. Musisz pozamieniać takie przypadki żeby było np x -= 2 (to samo co x = x - 2) i analogicznie x += 2 (to samo co x = x + 2).

Comments

Cały czas mnie gryzie dlaczego mimo że if (voteUp. style.backgroundColor === "green" || ""); Jest niepoprawnie, to działa jak trzeba...

---

Znaczy poprawne z punktu widzenia programu jest, tylko nic nie wnosi, bo w warunku

color === "red" || ""

warunek się wykona tylko gdy color === "red", 

opcja || "" zwraca fałsz, równie dobrze mógłbyś tam dać: || null, || 0, || false, i to da ten sam efekt.

Jak coś zawsze daje tą samą wartość prawda/fałsz, nie ma sensu tego wstawiać.

---

Stwierdziłem, że usunę to i zobaczę co i jak. No i działa. To teraz się zastanawiam jak ja to zrobiłem, że kiedy tego nie było wcześniej to nie działało :D

---

Na pewno działało z innego powodu, tego możesz być pewien ;)

---

Zapewne kiedy to dodawałem to zobaczyłem jakiś błąd który od razu poprawiłem i zapomniałem :p

Ale ważne, że działa jak należy ;)