jQuery, tablica, undefined

Question

$(document).ready(function() {   
    
    var moveCounter = 1;
    
    var clicked = new Array(9);
    clicked.fill(false);
    
    var field = document.getElementsByClassName("field");
    
    var i = 0;
    while (i < field.length) {
        $(field[i]).hover(function() {
            if (clicked[i] == false) {
                 if (moveCounter % 2 == 1) {
                    this.style.backgroundColor = "crimson";
                 }
                 else {
                    this.style.backgroundColor = "deepskyblue";
                 }
            }
           
        }, function() {
            if (clicked[i] == false) {
                this.style.backgroundColor = "gray";
            }
        });
        
        $(field[i]).click(function() {
            if (moveCounter % 2 == 1) {
                this.style.backgroundColor = "crimson";
            }
            else {
                this.style.backgroundColor = "deepskyblue";
            }
            ++moveCounter;
            clicked[i] = true;
            
        });
        
        ++i;
    }
});

Witam, dalej próbuję napisać grę w kółko i krzyżyk w JS. Chciałbym, aby po najechaniu kursorem niekliknięte pola zmieniały kolor, a po odjechaniu wracały do poprzedniego stanu. Stworzyłem tablicę, która będzie przechowywać informacje o tym, czy dane pole było już kliknięte, czy nie. Tylko że nie wiem, jak poprawnie przekazać tablicę do funkcji. Przy takim kodzie wartości elementów tablicy są undefined. Proszę o pomoc.

Answer 1

Myślę, że sam problem kolorowania elementów w zależności od tego czy były kliknięte można rozwiązać za pomocą klasy css, zobacz Pen'a i sprawdź czy o to Ci chodziło.

Comments

Dzięki, tak, właśnie o to chodziło. Tylko że chciałbym jednak dowiedzieć się, czemu mój kod nie działa, tak na przyszłość.

---

Hmmm, powiedz mi wpierw jak Ty byś widział, działanie tego w sensie, jak funkcjonuje moveCounter ?

---

moveCounter służy do sprawdzania, którego gracza ruch powinien być teraz wykonany. Dzięki niemu wiem, kiedy podświetlać pola na niebiesko (przy parzystych wartościach), a kiedy na czerwono (przy nieparzystych). Ale tak jak napisałem, problem jest w tym, że ta funkcja jQuery jakby "nie widzi" wartości w tablicy.

---

Wrzuciłbyś to wraz z html do codpena ?

---

CodePen

W CodePenie nie działa już w ogóle, choć to pewnie przez to, że pierwszy raz wrzucam. To znaczy u mnie pola zmieniają chociaż kolory po kliknięciu.

---

zlinkowałeś jquerry w ustawieniach js ? Podrzuć tego pena postaram się pomóc.

---

Już zlinkowałem :) https://codepen.io/Blue7/pen/MmLZba

---

Jeśli na początku funkcji hover dopiszę document.write(clicked[i]); , to wyświetli się "undefined", choć wartości elementów tej tablicy były deklarowane wcześniej na "false".

---

OK, wygląda na to, że mój kod nadaje się do generalnego remontu. Problem tkwił w tym, że ostatecznie zmienna i była równa 9, a clicked[9] nie istniał, a to właśnie do tej wartości i wszystkie te funkcje będą się zawsze odwoływać. Chyba użyję Twojego sposobu. Jeszcze raz dziękuję.

---

Aaaaaa rzeczywiście, nie mogłem się doszukać o co chodzi, ale skoro Ci się udalo to brawo Ty. Powodzenia z dalsza pracą i nie ma za co :D