this w JavaScript

Question

Witam, mam taki problem, piszę kółko i krzyżyk i chciałbym to zrobić "profesjonalnie", tak aby było jak najmnij zbędnego kodu.
Zamysł był taki w for each, nastawiam add evnlistener dla kazdego diva. Po kliknieciu wykonuje się funkcja która przez this.innerhtml zmienia jego zawartość. Lecz widocznie zle rozumiem this. Jak to ugryźć aby funkcja była wykonywana na klikniętym divie?(oczywiscie wiem ze moge dac np id kazdemu elementowi i zrobic to lopatologicznie ale nie o to w tym chodzi :) )
Oto co póki co napisałem(prawie nic, ale pokaże to mój tok myślenia):
 

const divs = document.querySelectorAll('div');

function move() {
    console.log('dziala');
    this.innerHtml = 'X';// tu probowalem kilku opcji żadna nie dziala poprawnie

}
divs.forEach((div) => {
    div.addEventListener('click', move)
})

 

Answer 1

Prawdopodobnie Event delegation jest odpowiedzią na Twój problem.

Comments

nie po prostu nie przekazalem obiektu do funkcji move ;)
 

function move(divs) {
    if (counter % 2 == 0) {
        this.innerText = "0";
        this.removeEventListener('click', move);
    } else {
        this.innerText = "X";
        this.removeEventListener('click', move);

    }
    counter++;
    //sprawdzanie warunków
    if (counter > 4) {


    }
    if (counter == 9) {
        alert('remis!');
    }


}
divs.forEach((div) => {
    div.addEventListener('click', move);

})

 

---

przekazałeś divs a w ogóle z tego nie korzystasz. Swoja drogą to divs to nie są twoje divy tylko event zdarzenia. Aby przekazac divy do funkcji move musiał byś zrobic cos takiego:

const divs = document.querySelectorAll('div');
 
function move(divs, event) {
    console.log('dziala');
    console.log(this)
    console.log(divs)
    this.innerHTML = 'X';// tu probowalem kilku opcji żadna nie dziala poprawnie
 
}
divs.forEach((div) => {
    div.addEventListener('click', move.bind(div, div))
})

teraz zarówno pod this jak i pod argumentem divs masz to samo.

Answer 2

Nie ma czegoś takiego jak innerHtml, jest natomiast innerHTML.

Comments

Niby czemu minus :o

---

Uraziłeś czyjeś uczucia.

Answer 3

Nie patrzysz do czego się odnosisz. Zobacz co siedzi pod this, jak działa addEventListener. console.log('dziala'); brzmi jak oszukiwanie samego siebie.