文章/答案/技术大牛

发布

社区首页 >问答首页 >如何使用forEach在JavaScript中为每个元素设置函数？

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

Stack Overflow用户

提问于 2020-08-21 09:04:31

回答 1查看 90关注 0票数 1

我在用JS制作一个蚀刻游戏。我有两个问题：

1)如何为网格中的所有元素设置函数？

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

当我像那样改变颜色的时候，所有的细胞都会发生变化，但是当我尝试使用函数时，它只是最后一个变化，当我鼠标移动其中的任何一个时。

2)每当用户更改input.value时，我如何在不重新加载页面的情况下更改网格大小？我想阿贾克斯，但我是一个非常新的，所以我不知道太多。

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>

javascript

dom-events

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-21 09:31:58

请查看下面代码段中的修补程序：

小改动：

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作为参数/参数，而不是使用全局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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/63519790

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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