Saya mencoba membuat kisi dengan jumlah kotak yang ditentukan di dalam wadah. Saya telah menggunakan fungsi dengan kotak 16x16 default dan menambahkan EventListener (mouseover) untuk menambahkan kelas ke div apa pun. Ini berfungsi dengan baik ketika saya pertama kali menyegarkan halaman. Masalahnya adalah ketika saya ingin mengatur ulang jumlah kotak dengan fungsi yang dipersonalisasi, kode saya berfungsi, tetapi EventListener berhenti bekerja. Ada Bantuan Disini?

const container = document.getElementById('container');

const buttonsDiv = document.querySelector('#buttons-div');

setGrid();

function resetGrid() {
    clearGrid();

    while (container.firstChild) {
        container.removeChild(container.firstChild);
    };

    let numberOfsquares = prompt('Number of squares??? 1-64:');
    return setGrid(numberOfsquares);
}

function setGrid(numberOfsquares = 16) {
    let heightAndWidth = 960 / numberOfsquares;
    for (let i = 0; i < numberOfsquares; i++) {
        for (let j = 0; j < numberOfsquares; j++) {
            const divNode = document.createElement('div');
            divNode.classList.add('unit');
            divNode.style.width = heightAndWidth + 'px';
            divNode.style.height = heightAndWidth + 'px';
            container.appendChild(divNode);
        }
    }
    return numberOfsquares;
}

function clearGrid() {
    squares.forEach((square) => {
        square.classList.remove('hover');
    });
}

let squares = document.querySelectorAll('.unit');
squares.forEach((square) => {
    square.addEventListener('mouseover', (e) => {
        console.log('listened');
        square.classList.add('hover');
    });
});

const clearButton = document.createElement('button');
clearButton.textContent = 'Clear';
clearButton.classList.add('reset-button');
clearButton.setAttribute('id', 'clearButton');
buttonsDiv.appendChild(clearButton);

const resetButton = document.createElement('button');
resetButton.textContent = 'Reset';
resetButton.classList.add('reset-button');
resetButton.setAttribute('id', 'resetButton');
buttonsDiv.appendChild(resetButton);

const buttons = document.querySelectorAll('button');
buttons.forEach((button) => {
    button.addEventListener('click', (e) => {
        if (button.id === 'clearButton') {
            clearGrid();
        } else if (button.id === 'resetButton') {
            resetGrid();
        }
    });
});
1
José González 8 Agustus 2019, 07:14

1 menjawab

Jawaban Terbaik

Seperti yang dinyatakan dalam komentar. Fungsi resetGrid menghapus elemen dari DOM, sehingga Pemroses Peristiwa terlampir tidak akan dipanggil lagi, karena Elemen sudah tidak ada lagi. Saya merekomendasikan untuk menggunakan "delegasi acara" untuk ini. Jadi lampirkan Event Listener ke container dan gunakan e.target dalam callback untuk mencari tahu item mana yang terkena.

container.addEventListener('mouseover', e => {
  const { target } = e;
  //use the child index for instance, or add col and row using a data attribute
})
1
philipp 8 Agustus 2019, 05:42