Ниже приведен мой текущий код, и цель состоит в том, чтобы изменить цвет одного поля сетки на случайный заданный цвет при наведении курсора мыши на него. Я пытаюсь добавить прослушиватель событий к каждому элементу сетки, и при наведении указателя мыши цвет меняется, но когда я запускаю это, цвет не меняется.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>

    <style>
        .square {
            background-color: #737373;
            float: left;
            position: relative;
            width: 30%;
            padding-bottom: 30.66%;
            margin: 1%;
        }
    </style>
</head>
<body>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>

    <script type="text/javascript">

        var color = [, "#3C9EE7", "#E7993C",
            "#E73C99", "#3CE746", "#E7993C"];

        document.querySelectorAll(".square").forEach(item => {
            item.addEventListener("mouseover", event => {

            document.getElementById(item).style.background
                    = color[Math.floor(Math.random() * color.length)];
            }
        })

    </script>
</body>
</html>

Я также безуспешно пробовал этот код Javascript:

let squares = document.querySelectorAll(".square");

for (i in squares) {
            i.addEventListener("mouseover", function() {

            document.getElementById(item).style.background
                    = color[Math.floor(Math.random() * color.length)];
            })
        }
1
Tosh 20 Мар 2021 в 07:41

2 ответа

Лучший ответ

Попробуйте этот синтаксис:

var color = [, "#3C9EE7", "#E7993C",
            "#E73C99", "#3CE746", "#E7993C"];
                                
let squares= document.querySelectorAll('.square');

squares.forEach(item => item.addEventListener('mouseover', (e) => {
    changeColor(item);
}))


const changeColor = (item) => {
  item.style.background = color[Math.floor(Math.random() * color.length)];
}
.square {
    background-color: #737373;
    float: left;
    position: relative;
    width: 30%;
    padding-bottom: 30.66%;
    margin: 1%;
}
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
1
sonEtLumiere 20 Мар 2021 в 05:14

С использованием цветового массива

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title></title>

    <style>
      .square {
        background-color: #737373;
        float: left;
        position: relative;
        width: 30%;
        padding-bottom: 30.66%;
        margin: 1%;
      }
    </style>
  </head>
  <body>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>

    <script>
      let color = ["#3C9EE7", "#E7993C", "#E73C99", "#3CE746", "#E7993C"];

      document.querySelectorAll(".square").forEach((item, i) => {
        let mouseOverFunc = function () {
          this.style.background =
            color[Math.floor(Math.random() * color.length)];
        };
        item.onmouseover = mouseOverFunc;
      });
    </script>
  </body>
</html>

Используя случайный цвет

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta charset="utf-8" />
    <title></title>

    <style>
      .square {
        background-color: #737373;
        float: left;
        position: relative;
        width: 30%;
        padding-bottom: 30.66%;
        margin: 1%;
      }
    </style>
  </head>
  <body>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>

    <script>
      document.querySelectorAll(".square").forEach((item, i) => {
        let mouseOverFunc = function () {
          this.style.background =
            "#" + Math.floor(Math.random() * 16777215).toString(16);
        };
        item.onmouseover = mouseOverFunc;
      });
    </script>
  </body>
</html>
1
Baskaran Ajiharan 20 Мар 2021 в 05:40