如何在单击 JS 生成的特定元素时添加颜色

Question

我正在使用 HTML、CSS 和 vanilla JS 创建一个像素艺术制作工具。大部分时间我都创建了 UI，但我无法使用该功能。我试过了：let cell = document.body.querySelectorAll('.grid-square');cell.addEventListener('click', function() {    cell.style.backgroundColor = 'red';});但是我的页面“addEventListener”不是一个函数。如何让我的 JS 在 HTML 之后加载，以便我可以让它工作？

Answer 1

let cells = document.body.querySelectorAll('.grid-square'); // querySelectorAll return all elements which have grid-square class.

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

        cells[i].addEventListener('click', function(){

            cells[i].style.backgroundColor = "red";

    });

}

Answer 2

只需 2 个步骤即可使此工作正常进行：

querySelectorAll返回一个元素数组，因此您需要遍历它们以将侦听器添加到每个单元格：

function setUpCellListeners(){

    let cells = document.querySelectorAll('.grid-square');

    cells.forEach((cell) => {

        cell.addEventListener('click', function() {

            cell.style.backgroundColor = 'red';

        });

   });

}

您需要在创建单元格后执行此操作。它们是在createGrid函数中创建的，因此我们可以通过在该函数的末尾调用它来实现：

//function to build the grid based on user input

function createGrid(height = 25, width = 25) {

    /* code to set up grid.... */

    // NOW we can set up our listeners because our grid is created

    setUpCellListeners();

}

工作示例：

let canvas = document.querySelector('.canvas');

let button = document.querySelector('button');

let high;

let wide;

let color = document.querySelector('.colorChoice').value;

function setUpCellListeners(){

    let cells = document.querySelectorAll('.grid-square');

    cells.forEach((cell) => {

       cell.addEventListener('click', function() {

           cell.style.backgroundColor = 'red';

       });

    });

}

//function to build the grid based on user input

function createGrid(height = 25, width = 25) {

    canvas.innerHTML = '';

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

        let row = document.createElement('div');

        row.classList.add('row');

        canvas.appendChild(row);

        for (let j = 0; j < width; j++) {

            let cell = document.createElement('div');

            cell.classList.add('grid-square');

            row.appendChild(cell);

        }

    }

    setUpCellListeners();

}

//listens for input of rows and columns

button.addEventListener('click', function() {

    high = parseInt(document.querySelector('.column-input').value);

    wide = parseInt(document.querySelector('.row-input').value);

    if (Number.isNaN(high) || Number.isNaN(wide)) {

        createGrid();

    } else {

        createGrid(wide, high);

    }

});

//Default grid built on load

window.onload = createGrid(25, 25);

.grid-square {

    height: 12px;

    width: 12px;

    border: 1px black solid;

}

.row {

    display: flex;

    justify-content: center;

}

.canvas {

    max-height: inherit;

    max-width: 75%;

}

   <!-- Bootstrap CSS -->

    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

    

    <!-- Navbar -->

    <nav class="navbar navbar-dark bg-dark">

        <span class="navbar-brand mb-0 h1 mx-auto navbar-brand">Pixel Art Maker</span>

    </nav>

    <!-- Container to put grid in -->

    <div class="container shadow p-3 mb-5 bg-white rounded mt-5 main">

      

      <div class="container canvas d-flex-inline">

        

      </div>

      <form class="d-flex-inline w-50 mx-auto">

        <div class="d-flex">

          <div class="form-group w-25 ml-auto mr-2">

            <label class="d-block text-center" for="gridRows">Rows</label>

            <input type="number" class="form-control row-input" id="gridRows">

          </div>

          <div class="form-group w-25 mr-auto ml-2">

            <label class="d-block text-center" for="gridColumns">Columns</label>

            <input type="number" class="form-control column-input" id="gridColumns">

          </div>

        </div>  

        </form>

        <div class="form-group w-25 mx-auto">

          <button type="submit" class="btn btn-primary w-100">Submit</button>

        </div>

      <form class="d-flex-inline w-50 mx-auto">

        <div class="form-group w-25 mx-auto">

          <label for="color">Color</label>

          <input type="color" class="form-control colorChoice" id="color">

        </div>

      </form>

    </div>

<!-- Optional JavaScript -->

    <!-- jQuery first, then Popper.js, then Bootstrap JS, then local JS -->

    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>

    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>