• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

[JS] addEventListener 'click' wykonuje się w trakcie deklaracji

0 głosów
73 wizyt
pytanie zadane 21 stycznia w JavaScript, jQuery, AJAX przez Bażyl Nowicjusz (150 p.)

Witam wszystkich, niedawno zacząłem się uczyć JSa i juz zaczynają się moje pierwsze problemy. Chodzi o to, że robię grę kółko i krzyzyk i chciałem dodać funkcję 'click' dla kazdego przycisku w pętli for na początku programu. Niestety program zamiast nasłuchiwać wykonuje funkcje na kazdym przycisku w trakcie dodawania listenera.

const buttons = [...document.querySelectorAll('.dataHolder')];
let turn = 1;

for(let i = 0; i< 9; i++)
{

    buttons[i].addEventListener('click', move(buttons[i]));

}

function move(event)
{
    
    if(turn % 2 === 0){

        event.innerText = "X";
    }
    else{

        event.innerText = "O";

    }

turn++;
}

Domyślam się, ze przyczyną jest jakiś głupi błąd, takze proszę wszystkich o pomoc. :)

2 odpowiedzi

+1 głos
odpowiedź 21 stycznia przez pablop76 Szeryf (89,270 p.)
wybrane 21 stycznia przez Bażyl
 
Najlepsza

Przeanalizuj

const buttons = [...document.querySelectorAll('.dataHolder')];
let turn = 1;

for(let i = 0; i< buttons.length; i++)
{

buttons[i].addEventListener('click', move,false);

}
function move()
{
if(turn % 2 === 0){

this.innerText = "X";
}
else{

this.innerText = "O";

}

turn++;
}

 

komentarz 21 stycznia przez pablop76 Szeryf (89,270 p.)

Nie miałem czasu napisać komentarz.

1.Jako parametr przekazujemy nazwę funkcji bez jej wywołania. (wywołanie powoduje natychmiastowe działanie funkcji, a ty chcesz chyba wywołać ją po kliknięciu)

2. Jako max iteracji  użyj długości tablicy (buttons.length) zamiast na sztywno  i< 9 będzie bardziej uniwersalnie. 

3. this wskazuje aktualnie kliknięty element

komentarz 21 stycznia przez Bażyl Nowicjusz (150 p.)
Zadziałało, dzięki wielkie :) Jeszcze tylko spytam za co odpowiada false w listenerze?
1
komentarz 22 stycznia przez pablop76 Szeryf (89,270 p.)

Jeśli jego ostatnim argumentem jest true procedura obsługi zdarzeń jest ustawiona dla fazy przechwytywania, jeśli jest false to procedura obsługi zdarzenia ustawiona dla fazy propagacji. 

źródło

0 głosów
odpowiedź 21 stycznia przez 12david12 Mądrala (7,490 p.)

A coś takiego:

 buttons[i].addEventListener('click', function() { move(i); });

 

Podobne pytania

0 głosów
1 odpowiedź 317 wizyt
0 głosów
1 odpowiedź 216 wizyt
0 głosów
1 odpowiedź 85 wizyt
Porady nie od parady
Odznacz odpowiedź zieloną fajką, jeśli uważasz, że jest ona najlepsza ze wszystkich i umożliwiła ci rozwiązanie problemu.Najlepsza odpowiedź

62,470 zapytań

108,624 odpowiedzi

226,796 komentarzy

36,380 pasjonatów

Przeglądających: 152
Pasjonatów: 13 Gości: 139

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...