How can I change background color of a specific grid box?
Question
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)];
})
}
2 answers
solution1
1 ACCPTED 2021-03-20 05:14:06
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>
solution2
1 2021-03-20 05:32:56
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
How can I change background color of a specific area in my chart's grid using Chart.js and Annotation?
How to change the color of a box next to the box I click on in a grid
How do I change the Background Color and Text Color in a Box?
How do i change the color of a box if it was on a specific color?
How do I change content and background color for a box on click?
How can i Change background color on scroll?
How can I change this button background color of the specific button that i have clicked? using javascript
How can i change canvas background color with “ input color and onchange ”
How can I animate grid box change with angular BrowserAnimationsModule?
how can I change the background image when I click on a color?
Related Tags