CODEWITHSUNDEEP
javascripthtmlcsscss-grid
Tosh
Tosh

Reputation: 21

How can I change background color of a specific grid box?

Below is my current code and the goal is to have a single grid box change to a random specified color when the mouse hovers over it. I am trying to add an event listener to each grid item and when the mouseover occurs the color changes, but when I run this there are no color changes.

<!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>

I also tried this Javascript code with no luck:

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)];
            })
        }

Upvotes: 1

Views: 1964

Answers (2)

Baskaran Ajiharan
Baskaran Ajiharan

Reputation: 508

using color array

<!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>

using randomize color

<!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>

Upvotes: 1

sonEtLumiere
sonEtLumiere

Reputation: 4562

Try this syntax:

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>

Upvotes: 1

Related Questions