• 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

VPS Starter Arubacloud
0 głosów
637 wizyt
pytanie zadane 21 stycznia 2019 w JavaScript 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 2019 przez pablop76 VIP (123,060 p.)
wybrane 21 stycznia 2019 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 2019 przez pablop76 VIP (123,060 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 2019 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 2019 przez pablop76 VIP (123,060 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 2019 przez niezalogowany

A coś takiego:

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

 

Podobne pytania

0 głosów
1 odpowiedź 458 wizyt
0 głosów
1 odpowiedź 1,225 wizyt
pytanie zadane 18 grudnia 2017 w JavaScript przez xxkondzioxx15 Obywatel (1,440 p.)
0 głosów
1 odpowiedź 809 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...