• 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
81 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 (93,430 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 (93,430 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 (93,430 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 Dyskutant (8,070 p.)

A coś takiego:

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

 

Podobne pytania

0 głosów
1 odpowiedź 352 wizyt
0 głosów
1 odpowiedź 231 wizyt
0 głosów
1 odpowiedź 90 wizyt
Porady nie od parady
Nie wiesz jak poprawnie zredagować pytanie lub pragniesz poznać którąś z funkcji forum? Odwiedź podstronę Pomoc (FAQ) dostępną w menu pod ikoną apteczki.FAQ

64,044 zapytań

110,431 odpowiedzi

231,266 komentarzy

47,813 pasjonatów

Przeglądających: 264
Pasjonatów: 20 Gości: 244

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.

...