为 eventListener 访问 javaScript 中的数组元素

Question

I am having trouble getting the div elements to change their background colours onmouseover to the colours set in the array colours.我无法让 div 元素在鼠标悬停时将其背景颜色更改为数组颜色中设置的颜色。 I would like it to accomplish the same thing that I would when you replace the line this.style.background = colours[i] with the one below it我希望它完成与将 this.style.background = colours[i] 行替换为它下面的行时相同的事情

 //An array of different colours var colour = ['blue', 'green', 'yellow', 'purple', 'peach', 'pink', 'orange', 'magenta', 'black', 'aliceblue']; var divContainer = document.getElementById('container'); var divS = divContainer.getElementsByClassName('innerDiv'); for (var i = 0; i < divS.length; i++) { divS[i].addEventListener('mouseover', function() { this.style.background = colour[i]; //this.style.background = "gold"; }); divS[i].addEventListener('mouseout', function() { this.style.background = "white"; }); }

 #container{ height: 100vh; }.innerDiv { height: 10%; width: 100%; }

 <.DOCTYPE html> <html lang="en"> <head> <title>Understanding JavaScript</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div id="container"> <div class="innerDiv">Hover me to change the colour blue</div> <div class="innerDiv">Hover me to change the colour green</div> <div class="innerDiv">Hover me to change the colour yellow</div> <div class="innerDiv">Hover me to change the colour purple</div> <div class="innerDiv">Hover me to change the colour peach</div> <div class="innerDiv">Hover me to change the colour pink</div> <div class="innerDiv">Hover me to change the colour orange</div> <div class="innerDiv">Hover me to change the colour magenta</div> <div class="innerDiv">Hover me to change the colour black</div> <div class="innerDiv">Hover me to change the colour aliceblue</div> </div> <!--Link to a script--> <script type="text/javascript" src="script.js"></script> </body> </html>

Answer 1

your problem is about the i of colour[i] because it is undefined when the event become.你的问题是关于colour[i]的i因为事件发生时它是未定义的。

change your code from更改您的代码

for (var i = 0; i < divS.length; i++)

to至

for (let i = 0; i < divS.length; i++)

Answer 2

// DOM (Document Object Model) fully Loaded and parsed
window.addEventListener('DOMContentLoaded', (event) => {
// Changed Peach to PeachPuff & aliceblue to AliceBlue to match HTML Color codes. Note that the AliceBlue might not be fully visible to distinguish between it and the whit background colour
var colour = ['blue', 'green', 'yellow', 'purple', 'PeachPuff', 
            'pink', 'orange', 'magenta', 'black', 'AliceBlue'];

var divContainer = document.getElementById('container');
// Used query selectorAll to return array of nodes with class name. And the . before the class name
var divS = document.querySelectorAll('.innerDiv');

for (let i = 0; i < divS.length; i++)
{
    console.log(divS[i]);
    divS[i].addEventListener('mouseover', function() {
        this.style.background = colour[i];

        
    });
    divS[i].addEventListener('mouseout', function() {
        this.style.background = "white";
    });
}
});

为 eventListener 访问 javaScript 中的数组元素

问题描述

2 个解决方案

解决方案1
0 已采纳 2020-12-05 02:21:05

解决方案2
0 2020-12-05 02:34:13

为 eventListener 访问 javaScript 中的数组元素

问题描述

2 个解决方案

解决方案1 0 已采纳 2020-12-05 02:21:05

解决方案2 0 2020-12-05 02:34:13

解决方案1
0 已采纳 2020-12-05 02:21:05

解决方案2
0 2020-12-05 02:34:13