Javascript - skrócenie kodu

Question

Witam, nie wiem jak skrócić ten kod js'a. Próbowałem na wiele sposobów, ale każdy z nich nie zadziałał lub nie dało się tego zrealizować. Proszę o jakąś sugestię w jaki sposób mogę to zrobić. 

var c0 = document.getElementById("c0");
var c1 = document.getElementById("c1");
var c2 = document.getElementById("c2");
var c3 = document.getElementById("c3");
var c4 = document.getElementById("c4");
var c5 = document.getElementById("c5");
var c6 = document.getElementById("c6");
var c7 = document.getElementById("c7");
var c8 = document.getElementById("c8");
var c9 = document.getElementById("c9");
var c10 = document.getElementById("c10");
var c11 = document.getElementById("c11");

c0.addEventListener('click', function () { revealCard(0)});
c1.addEventListener('click', function () { revealCard(1)});
c2.addEventListener('click', function () { revealCard(2)});
c3.addEventListener('click', function () { revealCard(3)});
c4.addEventListener('click', function () { revealCard(4)});
c5.addEventListener('click', function () { revealCard(5)});
c6.addEventListener('click', function () { revealCard(6)});
c7.addEventListener('click', function () { revealCard(7)});
c8.addEventListener('click', function () { revealCard(8)});
c9.addEventListener('click', function () { revealCard(9)});
c10.addEventListener('click', function () { revealCard(10)});
c11.addEventListener('click', function () { revealCard(11)});

 

Comments

Próbowałem na wiele sposobów, ale każdy z nich nie zadziałał lub nie dało się tego zrealizować

To pokaż co próbowałeś zrobić (jeśli były jakieś błędy w konsoli, to je pokaż), a spróbujemy wytłumaczyć dlaczego nie działało.

---

for (i=0; i<possible_cards.length; i++) {
    var "c"+i = document.getElementById('"c"+i');
}

for (i=0; i<possible_cards.length; i++) {
    "c"+i.addEventListener('click', function () { revealCard(i)});
}

tego pierwszego for nie mogę w ogóle zrealizować, bo cudzysłowia się dziwnie zachowują i nie działają jak powinny działac, a przy drugim for wyskakuje błąd: main.js:57 Uncaught TypeError: i.addEventListener is not a function at main.js:57 (anonymous) @ main.js:57

---

Cudzysłowy się zachowują jak najbardziej poprawnie i robią to, co kazałeś im robić – chociaż nie jest to to, co chcesz, żeby robiły ;)

Zapis '"c"+i' oznacza po prostu "c"+i. Żeby zrobić konkatenację ciągów powinieneś zapisać to inaczej, jako 'c'+ i lub, w ES6, `c${ i }` (zwróć uwagę na użycie bacticka w tym drugim przypadku).

No i nie da się w taki sposób zadeklarować zmiennej. Poza tym – jaki cel ma przypisywanie elementów do poszczególnych zmiennych, skoro masz już kolekcję tych elementów (possible_cards)?

---

Moim pomysłem było stworzenie 10 zmiennych za pomocą pętli for, które będą uchwytami do div'ów, a potem dodanie do każdej z nich EventListener, ale teraz wiem, że się nie da w taki sposób zadeklarować zmiennej.

Answer 1

const elements = document.querySelectorAll( '[id^="c"]' );

elements.forEach( ( element ) => {
	element.addEventListener( 'click', ( { target } ) => {
		const cardId = Number( target.id.replace( 'c', '' ) );

		revealCard( cardId );
	} );
} );

1. Pobierz wszystkie elementy, których [id] zaczyna się od "c".
2. Dla każdego takiego elementu dodaj listener zdarzenia click i wyciągnij kliknięty element do zmiennej target.
3. Ustal numer karty poprzez wyciągnięcie go z [id] elementu.
   1. Obetnij z [id] "c".
   2. Przekonwertuj tak uzyskany ciąg tekstowy na liczbę
4. Pokaż odpowiednią kartę.

Comments

Dzięki!

Answer 2

Spróbuj użyć pętli oraz let zamiast var.

Comments

Właśnie próbowałem użyć pętli, tylko że ona w ogóle nie działa. Poniżej  jest moja odpowiedź innemu użytkownikowi dlaczego.