[CR] JavaScript (#5): Poznajemy jQuery. Gra w pamięć

Question

CR = Code Review. O co chodzi? Zajrzyj tutaj
Pełna lista wszystkich Code Review? Zajrzyj tutaj

https://www.youtube.com/watch?v=edNqTubHUU0

Paczka z plikami z odcinka do pobrania: TUTAJ

Comments

o co chodzi z tym "błędem krytycznym"?

Bo coś mi chyba umknęło

Answer 1

W związku z kolejną dyskusją z cyklu best practises vs dydaktyka mam do Pana pytanie. Nie brał Pan nigdy pod uwagę możliwości tworzenia filmów na kanale Pasja Informatyki współpracując z osobami, które zawsze zabierają głos i robią refactoring kodu z filmów?

Nie chcę ujmować Pańskiej wiedzy, ale co odcinek jest coraz głośniej. Mimo świetnych zdolności dydaktycznych jakie Pan prezentuje poprzez kursy, nieczysty kod i złe nawyki (mimo, że to tylko materiał do nauki) znacząco obniżają jakość przekazywanego contentu i owocuje masą zapytań na forum o banalne rzeczy (czekamy na falę jQuery).

Proszę wziąć pod uwagę, że użytkownicy, którzy poddają Pański kod krytyce, to ludzie bardzo pomocni, o czym przekonał się nie jeden forumowicz. Osobiście uważam, że połączenie ich wiedzy i doświadczenia z pańską praktyką nauczycielską znacząco polepszyłoby jakość kursów webdevu na kanale. 

Pozdrawiam
Oczywiście jest to tylko moje skromne zdanie i osobista sugestia. 

Comments

Powiem tylko tyle, że jakiekolwiek złe zdanie miałbym o sposobie nauczania PHP, tak zawsze jestem chętny do pomocy forumowiczom, którzy ciągle odpowiadają na te same pytania oraz w rozwoju bardziej wartościowych materiałów na kanale. Za darmo, bez chwały.

---

 Powiem tylko tyle, że jakiekolwiek złe zdanie miałbym o sposobie nauczania PHP, tak zawsze jestem chętny do pomocy forumowiczom, którzy ciągle odpowiadają na te same pytania oraz w rozwoju bardziej wartościowych materiałów na kanale. Za darmo, bez chwały.

Bardzo miło mi to słyszeć - to wartościowa postawa, bo produktywna, tworząca wartość. No i wymagasz od siebie, a nie od innych (co jest trudniejsze niż porównywanie się z innymi i wymaganie perfekcji od kogoś, ale w mojej opinii jest jednocześnie podstawą bycia mężczyzną z pasją i inicjatywą). 

Niestety najczęściej w praktyce "bycia w internecie" gdy spotykam się z krytyką, to jest ona naszpikowana bezpardonowymi ocenami, pejoratywnymi, osobistymi docinkami na temat tego jak "słabym" jestem nauczycielem, wyśmiewaniem i etykietowaniem - zwłaszcza po wpisach blogowych Comandeera pozycjonowanych wprost na moje nazwisko wielokrotnie miałem do czynienia z "czystym" hejtem wylewanym różnymi kanałami (zero konkretu, tylko jakiś chamski sposób wyrażenia przesłania "jesteś do niczego" - oczywiście zdaję sobie sprawę, że takiej konsekwencji autor wpisów blogowych nie chciał i może nie być jej w ogóle świadomy).

Zwłaszcza młodzi ludzie (i to szczególnie na YouTube) przyzwyczajeni do "dram", "pocisków", "x obraża", "x masakruje" często nie potrafią rzeczowo dyskutować, stąd każdy krytyczny post (niezależnie od jakości) niejako "nasyła" na Ciebie rzeszę przeróżnych ludzisk, którzy lubują się w obrażaniu (bo nie można tego nazwać krytyką). Dlatego zasadniczo nie warto się angażować w jałowe "dyskusje". Od czasu do czasu pojawi się coś wartościowego, jak na przykład krytyka konkretnych momentów filmów, którą stworzył dawniej Comandeer (emocjonalny wpis "Mam nierówno pod sufitem" przez uprzejmość pominę), co daje wgląd w to jak i dlaczego ktoś prezentujący odmienny ("wstępujący") styl nauczania uzasadnia swój punkt widzenia. I to lubię przeczytać, żeby poprawiać swój warsztat i poszerzać horyzonty. Problem jest niestety taki, że wartościowej krytyki jest w sieci za mało.

Z chęci pomocy forumowiczów skorzystam na pewno, to miła odmiana! Niedługo podeślę Arkowi kod PHP#5. Pozdrawiam i dziękuję za wypowiedzi! - może kiedyś będę mógł znowu komfortowo udzielać się na forum, bez potrzeby odpowiadania na ciągłe listy zarzutów. Co jakiś czas będę próbował to robić. Miłego weekendu! MZ

---

może kiedyś będę mógł znowu komfortowo udzielać się na forum, bez potrzeby odpowiadania na ciągłe listy zarzutów. Co jakiś czas będę próbował to robić. Miłego weekendu! MZ

Przecież zawsze mogłeś, sugeruję po wrzuceniu nowego odcinka z PHP#5 śledzić forum przez tydzień i zobaczyć z jakimi problemami przyjdą ludzie, a jakie dajemy rozwiązania. Mile widziane dorzucenie coś od siebie ;) 
 

---

Przecież zawsze mogłeś

Akurat pan nie powinien mieć problemu ze zrozumieniem, co mam na myśli. Dziękuję za poradę, pozdrawiam

---

Luz ;)

Answer 2

Generalnie zawsze unikałem js więc można powiedzieć, że jest to mój pierwszy z nim kontakt, ale poprawiłem co nieco. Naprawiłem ten "krytyczny błąd" :) i dodałem możliwość restartu bez konieczności przeładowania strony, losowanie kart no i troszeczkę przebudowałem skrypt.

---

Kod: Codesandbox

Demo: zagraj

---

EDIT:

Całkiem już usprawniłem grę:

• Zwiększona ilość kart
• Zmieniona tematykę na Hotsa, w sumie to całkowicie zmieniłem wygląd strony
• Poziomy trudności
• System punktacji, który bierze pod uwagę ilość tur, odkrytych kart oraz czas gry
• Najlepszy wynik (rozróżnia poziomy trudności);

Powoli mi się kończą pomysły.

Comments

@Rettles, Hej! chętnie zajrzałabym do tego kodu. Niestety linki są juz nieaktywne :(

---

Cześć, to prawda ustawiłem repozytorium jako prywatne, bo nie jestem już taki dumny z tego kodu jak kiedyś :D a w ostatnim czasie przyszło mi udostępniać GH potencjalnym pracodawcom, stąd taka decyzja. Link do samej stronki z grą już naprawiłem ;) a odnośnie kodu to spróbuję go udostępnić w innym miejscu, jak coś to dam znać pod tym komentarzem

---

@susanel, Zaktualizowałem post, dobrej zabawy :D

---

@Rettles, Dziękuję bardzo! Jak najbardziej rozumiem. Ja dopiero się uczę więc dla mnie jest to pomocne. :)

---

@Rettles, Całkiem fajna gra! Moja wersja: https://jan-rychlik-sh.github.io/kursOne/JavaScript/memory/index.html

Answer 3

https://mortmortis.pl/stuff/CR-jQ-5.pdf

Można jeszcze zamiast tworzyć kolejne zagnieżdżenia kodu JS, użyć warunku przeciwnego do tego w ifie + return.

Przejrzałem końcówkę filmu - jest propozycja refaktoryzacji redundancji. Zwracam honor tutaj.

EDIT: Chciałbym przeprosić za JS punkt 4. Trochę za bardzo mnie zaszokował ten pomysł. Nie powinienem wyzywać tego od idiotyzmów.

Comments

Jak dla mnie to ten system dydaktyczny nie działa, skoro historia powtarza się co wypuszczenie odcinka...

Ja jeszcze jako niedawno początkujący (a może nadal) zwróciłbym też uwagę na to, że na filmikach jest przedstawione jakby idealne programowanie. 

A jest trochę inaczej w rzeczywistośći... Z własnego doświadczenia i czytając pytania na forum, można zauważyć że jednak początek, to tonięcie w wielkiej ilości błędów, problemów, zagwoztek i trudów.

Ja wiem, że film bez błędów, niekompilującego się kodu albo np. niedziałających funkcji - ogląda się dużo milej i wszystko wygląda bardziej profesjonalnie, ale początkujący robi sobie trochę złą wizje, potem szybko się poddaje i nie potrafi sobie radzić z problemami. Źle wpisana ścieżka do pliku/zdjęcia, to chyba najczęstszy problem i  tylko pytanie "dlaczego nie działa?". Wystarczałoby przypominać o konsoli (choć widziałem, że tutaj coś była użyta) i pokazać jak są wyświetlanie najbardziej spotykane błędy.

Zapewne wtedy byłoby trzeba podzielić taki odcinek na parę mniejszych, ale to też wyszłoby na dobre, bo 1h i 20 minut, to i tak naprawdę dużo, jeśli chodzi o dawkę wiedzy.

Taki tam, mój mały wywód. ;)

 

PS. Ja i tak cały się zastanawiam czemu wszystko jest przedstawiane na tym okropnym Notepad++, jakby nie było lepszych i ładniejszych edytorów (a to też usprawniłoby naukę). ;)

---

No właśnie przeczytałem dokładnie całe code review, i z mojego (niewielkiego) doświadczenia wiem, że były tam uwagi słuszne. O to się nie czepiam. Po prostu forma przekazania tego wyglądała trochę pretensjonalnie. Z chęcią zobaczyłbym Twój kod po tych poprawkach o których piszesz (nie żeby się czepiać, tylko zobaczyć inne podejście). Natomiast nie uważam, żeby pan MZ robił złą robotę - nawet jeśli coś nie jest idealne albo aktualne to po to są różne źródła żeby to sobie zrewidować. A od czegoś trzeba zacząć.

---

#chcęPowiadomienia

---

Natomiast nie uważam, żeby pan MZ robił złą robotę - nawet jeśli coś nie jest idealne albo aktualne to po to są różne źródła żeby to sobie zrewidować. A od czegoś trzeba zacząć.

To jest, niestety, pobożne życzenie i zwracałem na to uwagę wielokrotnie. Wystarczy sobie poobserwować pytania o ocenę kodu tutaj na forum czy na grupach na FB. Niemal nikt nie rewiduje wiedzy w różnych źródłach, dlatego tak istotne jest, by źródło było jak najbardziej poprawne merytorycznie.

---

Nic się nie zmieni więc na siłę nie ma co ciągnąć tej dyskusji.

Naprawdę koniec.

CR to kompromis pomiędzy "Nauczycielami" a "Programistami".
Ja i tak odpowiadam tutaj na jakiś 1% pytań, bo to się robi nudne jak co chwile pojawiają się pytania: Dlaczego mi ten kod nie działa , o użyłem @, bo tak mi pokazali i nie działa!!!! XD Albo umiem kopiować kod, ale nie umiem zrobić prostego routingu

@Schizohatter, wróć do udzielania się na grupie fejsowej w pierwszych krokach, tam nie ma takiego podziału, lub tutaj odpowiadaj osobą które używać zaczęły jakiś FW, gdzie widzisz, że poziom pytania jest warty odpowiedzi. ;)

Temat wyczerpany, bo za chwilę będziecie krzyczeć na siebie. 

PS: Taki śmieszny mem znalazłem ;) 
https://i.stack.imgur.com/ssRUr.gif

Answer 4

1. losowość umieszczenia kart przy rozdaniu

2. brak reakcji przy dwukrotnym kliknięciu na tą samą kartę

3. możliwość restartu gry po zakończeniu obecnej

W pliku memory.js wprowadziłem następujące zmiany:

ad 1) na samym początku pliku:

var cards_list = ["ciri.png", "geralt.png", "jaskier.png", "jaskier.png", "iorweth.png", "triss.png", "geralt.png", "yen.png", "ciri.png", "triss.png", "yen.png", "iorweth.png"];
var cards = new Array();

for(var i = 12;i>0;i--)
{
    var rand_id = Math.floor(Math.random() *i);
    cards.push(cards_list[rand_id]);
    cards_list.splice(rand_id,1);
}

ad 2) w definicji funkcji revealCard(nr) zamiast "if ( opacityValue != 0 && lock == false)" :

    if ( opacityValue != 0 && lock == false && nr != visible_nr )

ad 3) w definicji funkcji hide2Cards(nr1, nr2) zamiast "$('.board').html('<h1>You win!<br>Done in '+turnCounter+' turns</h1>');" :

$('.board').html('<h1>You win!<br>Done in '+turnCounter+' turns. <span class="reload" onclick="location.reload()">Click to reload.</span></h1>');

W main.css na koniec pliku dodałem:

.reload
{
    margin-top: 5px;
    letter-spacing: 2px;
}

.reload:hover
{
    color: #e9b64a;
    cursor: pointer;
}

Answer 5

Wspominał Pan w odcinku o innych grach opartych na jQuery. Postawiłem sobie dość ambitne zadanie jak na kogoś kto tylko hobbystycznie uczy się programować i próbuję zaprogramować warcaby. Wstępna wersja poniżej. Zdaje sobie sprawę, że wiele rzeczy można w tym chaotycznym kodzie usprawnić, i że gra wymaga jeszcze dalszej pracy. Na razie jestem zadowolony, że chociaż tyle udało mi się napisać. :)

Założenia: bicia są obowiązkowe, można bić do tyłu

Do okodowania: bicia wielokrotne, zamiana w damkę, wykrywanie remisu (15 ruchów bez zbicia), zaprogramowanie sztucznej inteligencji żeby można było grać z komputerem a nie tylko z samym sobą ;)

https://codepen.io/mczekajski/pen/ayxpaR

Comments

Super, dobra robota! :) Link do demo warcab trafi niedługo na nasz fanpage na Facebooku -  jeśli masz jakieś portfolio / bloga, to możesz osadzić tam (pod dowolnym adresem) to demo - zyskasz trochę wizyt w swojej domenie. Pozdrawiam

---

Dziękuję. Portfolio dopiero się tworzy (pewnie jeszcze długo, bo nie mam za dużo do pokazania...). Ta wersja na codepen już jest nieco bardziej rozwinięta, okodowałem bicie wielokrotne, zamianę w damkę, jeszcze kompletny mechanizm bicia damką wymaga dopracowania. Proszę tylko podpisać link moim imieniem i nazwiskiem (Marcin Czekajski) żebym w razie czego mógł się pochwalić ;)

---

Jasna sprawa, wrzucę zatem w najbliższy poniedziałek. Pozdrawiam

Answer 6

Po obejrzeniu video zabrakło mi warunku sprawdzającego czy ta druga karta ma inny nr niż ta pierwsza, bo na chwilę obecną istnieje możliwość odkrycia jednej karty potem ponowne jej kliknięcie co powoduje usunięcie z planszy tylko jednej karty :)

Comments

Tak jest, to właśnie trzeba poprawić w obsłudze kliknięcia karty. Pozdrawiam

Answer 7

Witam,

moja wariacja na temat:

https://github.com/Rafrucin/memory

- dodano wiecej kart i je zmieniono

- dodano dzwieki

- kod jest latwo skalowalny 

 

Comments

Wow, fajnie zrealizowane Panie Pawle, także "pod maską :) Pozdrawiam

---

Wersja Pawła była jedną z inspiracji,  ja mam na imię Raf  ale i tak dziękuję za dobre słowo. 

---

A, rozumiem - nie doczytałem, że przecież Pana imię to Rafał, a Pawła wziąłem z powodu wspomnienia o wersji Pawła Niesiołowskiego (przepraszam). Pozdrawiam!

Answer 8

Cześć

Dołączam się do zabawy.

Generalne zmiany:

- Osadzenie rozgrywki w klimacie gry League of Legends

- Losowanie kart

- Resetowanie planszy po wygranej

- Próba uproszczenia kodu

Demo: https://pawelgargula.github.io/MemoryGame/

Kod: https://github.com/PawelGargula/MemoryGame

Pozdrawiam

Paweł

Answer 9

Dorzucam swoją, trochę poprawioną wersję. Na pewno można tu jeszcze dużo poprawić, ale jako ćwiczenie z odcinka zrobiłem tyle. Zebrałem to co już padło w wątku i w ten sposób sobie poćwiczyłem.

Kod:

https://github.com/pwkwiatkowski/MemoryGame_js_jquery/blob/main/docs/memory.js

Gra:

https://pwkwiatkowski.github.io/MemoryGame_js_jquery/

Answer 10

To funkcja która losowa zapełnia tablicę  parami kart bez duplikowania :)

var cards = [
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
    "empty",
];
function setStartPhotos()
{	
	for(i=0; i<12; i++)
	{
		$('#c'+i).css('background-image', 'url(img/game/karta.png)');
	
	}
	generateRandomBoard();
}
function generateRandomBoard()
{
	var ciri=0; geralt=0; jaskier=0; iorweth=0; triss=0; yen=0; 
	var random=0; 
	var randomSwitch =0;
	do
	{
		randomSwitch = Math.floor((Math.random()*6)+1);
		random=Math.floor((Math.random()*12)+1)-1;
		switch(randomSwitch)
		{
			case 1:
			{
				if((ciri<2)&&(cards[random]=="empty"))
				{
					ciri++;
					cards[random]="ciri.png";
				}
			
			break;
			}
			
			case 2:
			{	
				if((geralt<2)&&(cards[random]=="empty"))
				{
					geralt++;
					cards[random]="geralt.png";
				}
			break;
			}
			case 3:
			{	
				if((jaskier<2)&&(cards[random]=="empty"))
				{
					jaskier++;
					cards[random]="jaskier.png";
				}
			break;
			}
			case 4:
			{	
				if((triss<2)&&(cards[random]=="empty"))
				{
					triss++;
					cards[random]="triss.png";
				}
			break;
			}
			case 5:
			{	
				if((yen<2)&&(cards[random]=="empty"))
				{
					yen++;
					cards[random]="yen.png";
				}
			break;
			}
			
			case 6:
			{
				if((iorweth<2)&&(cards[random]=="empty"))
				{
					iorweth++;
					cards[random]="iorweth.png";
				}
			break;
			}	
		}
	}
	while(ciri<2||geralt<2||jaskier<2||triss<2||yen<2||iorweth<2);
	document.write(cards);
}

 

Comments

Pomijając tą tablicę, to tyle wyciekło Ci do globalnego scopeu, że random to nie random 

---

Zaproponuję bardziej funkcyjne rozwiązanie z małą pomocą biblioteki lodash

const shuffleCards = cards => _(cards)
	.concat(cards) // podwojenie ilości kart
	.shuffle() // pomieszanie kart
	.value() // zwrócenie nowej tablicy

const cards = ['Dowolna', 'liczba', 'kart']
const gameBoard = shuffleCards(cards)

console.log(gameBoard) 
// ["Dowolna", "liczba", "Dowolna", "liczba", "kart", "kart"]

 

---

Z pomocą jQuery możesz znacznie skrócić twój zapis ;)

Używając arrow (=>) function

// twoja tablica z kartami (bez duplikatów)
let cards = ["1.png", "2.png", "3.png", "4.png"];

// funkcja, która dubluje tablice oraz sortuje ją w losowej kolejności
let shuffleArray = (array) => $.map(array, (element) => [element, element]).sort(() => 0.5 - Math.random());

cards = shuffleArray(cards);

 

funkcję shuffleArray() można zapisać również w taki sposób:

let shuffleArray = function (array) {
    return $.map(array, function (element) {
        return [element, element];
    }).sort(function () {
        return 0.5 - Math.random();
    });
};

 

---

Zrobie wersję na lokalnych zmiennych, w których funkcja zwraca tablice :)

Ale jak na początkującego to chyba nie ma dramatu :D? 

---

Ten pierwszy kod, to trochę dramat był : p

Hmm, tak naprawdę nie potrzeba do tego jQ

const shuffleArray = arr => [...arr, ...arr].sort(() => 0.5 - Math.random())

Cały problem rozchodzi się o funkcję mieszającą, spójrz na komentarze do tej odpowiedzi, w wolnej chwili sprawdzę dokładniej o co chodzi - ale wstępnie miesza całkiem dobrze

Answer 11

Przyłączam się do zabawy. 

---

Najważniejsze zmiany, które wprowadziłem:

• naprawiłem "błąd krytyczny" i uprościłem kod,
• zmieniłem tematykę i wygląd gry - osadziłem ją w świecie serialu "Twin Peaks",
• dodałem losowanie kart i zwiększyłem ich liczbę,
• stworzyłem możliwość zapisywania najlepszych wyników (z wykorzystaniem AJAX i PHP),
• dodałem licznik odwiedzin.

---

Kod gry: GitHub

Demo: Twin Peaks Memory Game

 

Comments

Ha, świetna robota! Laury Palmer się nie spodziewałem, dobry gust serialowy :) No i świetna obudowa w JS, PHP i AJAXie! Poczekam jeszcze trochę czy pojawią się kolejne przeróbki i również pójdzie na naszego FB. Fajnie, że podzieliłeś się pełnym kodem. Pozdrawiam! :)

---

Dzięki za ten komentarz. Twoje słowa dużo dla mnie znaczą. Niecierpliwie czekam na kolejne odcinki Twoich świetnych kursów. Pozdrawiam! :)

Answer 12

Czy kod który jest poddany refaktoryzacji z kursów można znaleźć np na githubie?

Comments

Oczywiście! CodersCommunity - CodeReview

---

Dziękuję bardzo! Pozdrawiam.

Answer 13

Mógłby mi ktoś wskazać jak sprawić, żeby po kliknięciu dwa razy tego samego kafelka nie znikało i nie zaliczało tury? Resztę kodu poprawiłem, ale z tym sobie nie mogę poradzić...

Pozdrawiam

Comments

Dopiero sam zacząłem przerabiać ten kurs stąd ta późna odpowiedź, ale może komuś kto ma pierwszą styczność z programowaniem się przyda, a trafi na ten kurs później. 

if(oneVisible == false){
            //First card
            oneVisible = true;
            visibleNr = nr;
            lock = false;
        }else{
            //Second card
            if(visibleNr != nr)
            {
                if(cards[visibleNr] == cards[nr])
                {
                    setTimeout(function(){ hide2Cards(nr, visibleNr)}, 750);
                    lock = false;
                    pairsLeft--;
                    if(pairsLeft<=0){
                        $('.board').html('<h1>You win! <br/>Done in ' + turnCounter + ' turns</h1>');
                    }
                }else{
                    setTimeout(function(){ restore2Cards(nr, visibleNr)}, 1000);
                    lock = false;
                }
    
                turnCounter++;
                $('.score').html('Turn counter: ' + turnCounter);
                oneVisible = false;
            }
        }

Dodałem trochę dodatkowego kodu, dzięki czemu mam nadzieję nowe osoby będą mogły szybciej znaleźć miejsce zmian. W warunku else całość została opakowana w jeszcze jedną instrukcję warunkową, która sprawdza numer pierwszej karty (visibleNr) oraz drugiej karty (nr pobranej z argumentu funkcji). Każda karta ma swój kod, więc jeśli numery karty są różne (stąd warunek visibleNr != nr) to wykona się dalsza część elsa.
 

Pozdrawiam

Answer 14

Szukam sposobu na uproszczone dodawanie nasłuchiwaczy

Tu umieściłem mój kod

https://jsfiddle.net/t8wgrdeg/1/

chodzi mi konkretnie o tą linijkę

for (var i = 0; i < cardsList.length; i++)
{

	cardsList[i].addEventListener("click", function() { revealCard(i); } );
}

Całoś przy tym działa tak, że nie odsłania kart, ale po dwóch kliknięciach zlicza tury. Po 6. turze pojawia się komunikat "You win". 

Albo nasłuchwacze nie zostały dodane albo parametr nie przesłany albo jedno i drugie. Będę wdzięczny za naprawodzenie na rozwiązanie.

Comments

Po tylu latach przydać się może tylko komuś innemu, ale było tłumaczone gdzieś wyżej i najprostszym rozwiązaniem jest zmienić 'var' na 'let'.

Answer 15

Niby takie proste żeby przerobić addEventListener dla każdej karty na pętle a miałem z tym potworny problem.

Powiedzmy że na razie karta ma zwrócić jej numer.

for(var i=0;i<20;i++){
     document.getElementById('c'+i).addEventListener("click",function(){
        revealcard(i);
    });
function revealcard(nr){
console.log(nr);
};

Tutaj z uporem maniaka zwraca tylko ostatni numer z pętli obojętnie której karty bym nie klikał.

Może to obejść w taki sposób?

for(var i=0;i<20;i++){
     document.getElementById('c'+i).addEventListener("click",function(){
        revealcard(this.id.substring(1));
    });

Teraz ładnie zwraca mi odpowiedni numer, ale nie wiem czy to jest najlepsza metoda.

W tych refaktoryzacjach widzę jakąś inną metodologię, np. użycie właściwości target z jquery, ale nie widzę zrobienia tego w czystym js tak żeby po prostu zastąpić ten kod z odcinka. 

Czemu ta pierwsza metoda nie działa?

Intrygującą metodę widzę w ostatniej refaktoryzacji

var cardsList = $('.board div:not(.score, .reset)');

for (var i = 0; i < cardsList.length; i++)
{

    cardsList[i].addEventListener("click", function() { revealCard(i); } );
}

Ale nie czaję jak działa to cardsList - ten uchwyt zwraca tablicę wszystkich divów wewnątrz klasy board które nie mają klasy score albo reset ta? Jest na to jakiś ekwiwalent bez jQuery?

Comments

Czemu ta pierwsza metoda nie działa?

W pętli for deklarujesz zmienną i, która po kilku milisekundach przyjmuje wartość 20. W momencie klikania, wyświetlasz jej zawartość -> stąd taki wynik.

Najprostszym rozwiązaniem byłoby zadeklarowanie zmiennej i słowem kluczowym let, zamiast var. Zasięg blokowy zmiennej sprawia, że każda iteracja ma na stałe przypisaną daną wartość iteratora.

Z drugiej strony, w tym miejscu, warto już poczytać o event delegation

---

Jest na to jakiś ekwiwalent bez jQuery?

documnet.querySelectorAll

Answer 16

Mam jeszcze inne pytanie jak to jest w końcu z tym zasięgiem zmiennych? Tutaj nie chce mi w ogóle reagować jeśli ustalę zmienną poza funkcją

var pierwszyklik = false;

function revealcard(nr){

console.log(pierwszyklik);

.......

Tutaj loguje mi po prostu undefinded, nawet jeśli mam ustaloną zmienną tuż ponad tą funkcją. Miał ktoś podobny problem?

Comments

pokaż więcej kodu bo w tym fragmencie nie ma żadnego błędu

---

Dobra mam, użyłem potem var w if-ie czyli zamiast przypisać wartość definiowałem od nowa zmienną. Sory za głupie pytanie.