如何在 JavaScript 中使用 forEach 为每个元素设置一个函数？

Question

我正在用 JS 制作一个 Etch 素描游戏。我有两个问题：
1) 如何给grid中的所有元素设置一个函数？

cellArray.forEach(elem => {
    elem.addEventListener('mouseover', () => {
        elem.style.backgroundColor = 'red';
    });
});

当我像那样改变颜色时，所有单元格都在改变，但是当我尝试使用函数时，当我将鼠标悬停在其中任何一个上时，它只改变最后一个。

2) 当 input.value 被用户更改时，如何在不重新加载页面的情况下每次更改网格大小？我想AJAX，但我是新人，所以我知道的不多。

let sketch = document.querySelector('#sketch-grid'),
cellArray = [],
input = document.querySelector('.input-skh'),
cellNumber;

cellNumber = input.value;


let colors = {
    blue: function () {
        cell.style.backgroundColor = 'blue';
    },
    white: function () {
        cell.style.backgroundColor = 'white';
    },
    random: function () {
        let r = Math.floor(Math.random() * (256)),
            g = Math.floor(Math.random() * (256)),
            b = Math.floor(Math.random() * (256)),
            randomColor = '#' + r.toString(16) + g.toString(16) + b.toString(16);
        cell.style.backgroundColor = randomColor;
    }
};

    function buildGrid(){
            sketch.style.gridTemplateRows = `repeat(${cellNumber}, auto)`;
            sketch.style.gridTemplateColumns = `repeat(${cellNumber}, auto)`;
            for (let i = 0; i < cellNumber * cellNumber; i++){
              
                cell = document.createElement('div');
                cell.classList.add('cell');
                sketch.appendChild(cell);
                cellArray.push(cell);
            }

    }
    
input.addEventListener('oninput', buildGrid());

  /*let cellNumber = +prompt('The size of sketch is: ');*/

  


  function changeColor(){
    colors.random();
}

cellArray.forEach(elem => elem.addEventListener('mouseover', changeColor()));

* {
  box-sizing: border-box;
}

.sketch-input {
  margin: auto;
  text-align: center;
  background-color: lightseagreen;
}
.sketch-input .input-skh {
  width: 300px;
  height: 70px;
  background-color: mediumpurple;
  font-size: 40px;
  color: white;
}
.sketch-input label {
  color: white;
  font-size: 35px;
}

.wrapper-sketch {
  width: 100%;
  height: 800px;
  background-color: black;
  padding: 20px;
}
.wrapper-sketch #sketch-grid {
  display: grid;
  margin: 10px auto;
  width: 500px;
  height: 500px;
}
.wrapper-sketch #sketch-grid div {
  border: 2px solid crimson;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Etch a sketch</title>
    <link rel="stylesheet" href="../templates/main.css">
</head>
<body>
<div class="sketch-input">
    <label>Choose a size of your sketch:</label>
    <input class="input-skh" type="range" min="3" max="50">

</div>
<div class="wrapper-sketch">
    <div id="sketch-grid"></div>
</div>

<div class="buttons">
    <button class="button__choose-color">Change Color</button>
    <button class="button__reset">RESET</button>
</div>


<script src="../js/app.js"></script>
</body>
</html>

Answer 1

检查以下代码片段中的修复：

小改动：

cellArray.forEach(elem => elem.addEventListener('mouseover', () => changeColor(elem)));

注册事件处理函数而不是立即调用changeColor()函数。同时将当前 elem 传递给函数。

random: function (elem) {
    let r = Math.floor(Math.random() * (256)),
        g = Math.floor(Math.random() * (256)),
        b = Math.floor(Math.random() * (256)),
        randomColor = '#' + r.toString(16) + g.toString(16) + b.toString(16);
    elem.style.backgroundColor = randomColor;
}

使用 elem 作为 argument/parameter 而不是使用全局 cell 值。

展开并查看以下片段：

    let sketch = document.querySelector('#sketch-grid'),
    cellArray = [],
    input = document.querySelector('.input-skh'),
    cellNumber;

    cellNumber = input.value;


    let colors = {
        blue: function () {
            cell.style.backgroundColor = 'blue';
        },
        white: function () {
            cell.style.backgroundColor = 'white';
        },
        random: function (elem) {
            let r = Math.floor(Math.random() * (256)),
                g = Math.floor(Math.random() * (256)),
                b = Math.floor(Math.random() * (256)),
                randomColor = '#' + r.toString(16) + g.toString(16) + b.toString(16);
            elem.style.backgroundColor = randomColor;
        }
    };

        function buildGrid(){
                sketch.style.gridTemplateRows = `repeat(${cellNumber}, auto)`;
                sketch.style.gridTemplateColumns = `repeat(${cellNumber}, auto)`;
                for (let i = 0; i < cellNumber * cellNumber; i++){
                  
                    cell = document.createElement('div');
                    cell.classList.add('cell');
                    sketch.appendChild(cell);
                    cellArray.push(cell);
                }

        }
        
    input.addEventListener('oninput', buildGrid());

      /*let cellNumber = +prompt('The size of sketch is: ');*/

      


      function changeColor(elem){
        colors.random(elem);
    }

    cellArray.forEach(elem => elem.addEventListener('mouseover', () => changeColor(elem)));

    * {
      box-sizing: border-box;
    }

    .sketch-input {
      margin: auto;
      text-align: center;
      background-color: lightseagreen;
    }
    .sketch-input .input-skh {
      width: 300px;
      height: 70px;
      background-color: mediumpurple;
      font-size: 40px;
      color: white;
    }
    .sketch-input label {
      color: white;
      font-size: 35px;
    }

    .wrapper-sketch {
      width: 100%;
      height: 800px;
      background-color: black;
      padding: 20px;
    }
    .wrapper-sketch #sketch-grid {
      display: grid;
      margin: 10px auto;
      width: 500px;
      height: 500px;
    }
    .wrapper-sketch #sketch-grid div {
      border: 2px solid crimson;
    }

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Etch a sketch</title>
        <link rel="stylesheet" href="../templates/main.css">
    </head>
    <body>
    <div class="sketch-input">
        <label>Choose a size of your sketch:</label>
        <input class="input-skh" type="range" min="3" max="50">

    </div>
    <div class="wrapper-sketch">
        <div id="sketch-grid"></div>
    </div>

    <div class="buttons">
        <button class="button__choose-color">Change Color</button>
        <button class="button__reset">RESET</button>
    </div>


    <script src="../js/app.js"></script>
    </body>
    </html>

如何在 JavaScript 中使用 forEach 为每个元素设置一个函数？

How to set a function for every element, using forEach in JavaScript?

javascript

dom-events