使用 list.forEach() 添加事件侦听器 - 仅更改最后一个列表项
adding event listeners with list.forEach() - only last list item changes
我是网页设计(和编码)的新手,今天下午我遇到了一个我无法独自解决的问题。我希望你们中的一个能帮助我。
我想创建当用户将鼠标悬停在其上时变为绿色,当鼠标再次离开时变为红色的文本元素。 (稍后,当鼠标悬停在特定对象上时,音频文件将开始播放。)
当您 运行 代码时,您可以看到只有最后一个元素变为红色,当鼠标悬停在其他元素上时也是如此。我的 (Javascript) 代码有什么问题?
const elements = [
{title: 'Element1'},
{title: 'Element2'},
{title: 'Element3'},
{title: 'Element4'},
{title: 'Element5'}
];
window.onload = () => {
elements.forEach(element => {
title = document.getElementById(element.title);
//add event listeners
title.addEventListener("mouseover", handleMouseOver = () => {
mouseOver(title);
});
title.addEventListener("mouseout", handleMouseOut = () => {
mouseOut(title);
});
});
};
//play soundfiles
const mouseOver = (title) => {
title.style.backgroundColor = "red";
};
const mouseOut = (title) => {
title.style.backgroundColor = "#4CAF50";
};
body {
margin:0;
margin-left:0em;
padding:0;
overflow: hidden;
}
canvas {
margin:auto;
}
.compositions {
display: inline-block;
align-items: center;
font-style: arial;
font-size: 17px;
list-style-type: none;
text-align: center;
margin-top: 5em;
}
.compositions p {
margin-bottom: 0.8em;
margin:0em 0.8em 1em 1em;
display: inline-block;
}
.compositions input {
background-color: #4CAF50; /* Green */
border: none;
border-radius:50px;
color: white;
padding: 8px 20px;
margin-left: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-style: arial;
font-size: 12px;
}
.compositions p:hover{
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>InteractiveWebsite</title>
<script src="../libraries/p5.js"></script>
<script src="../libraries/p5.dom.js"></script>
<script src="../libraries/p5.sound.js"></script>
<!--script src="../libraries/Tone.js"></script-->
<!--CreateJS libraries-->
<script src="../libraries/soundjs.min.js"></script>
<script src="../libraries/cordovaaudioplugin.min.js"></script>
<script src="../libraries/flashaudioplugin.min.js"></script>
<script src="../libraries/preloadjs.min.js"></script>
<!--Own javascript files-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<main>
<div class="compositions">
<p id=Element1>Element 1</p><br>
<p id=Element2>Element 2</p><br>
<p id=Element3>Element 3</p><br>
<p id=Element4>Element 4</p><br>
<p id=Element5>Element 5</p><br>
</div>
</main>
<script src="sketch.js"></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>
我研究了另外两个主题 ( and here),但它们似乎不适合我的情况。
提前致谢,
芥末整形器
您遇到关闭问题,标题未声明
window.onload = () => {
elements.forEach(element => {
title = document.getElementById(element.title);
//add event listeners
title.addEventListener("mouseover", handleMouseOver = () => {
mouseOver(title);
});
title.addEventListener("mouseout", handleMouseOut = () => {
mouseOut(title);
});
});
}
所以 'default declaration' 似乎在 forEach 之外。只需像 const title = document.getElementById(element.title);
一样声明它,一切都会起作用。
也为 id 属性添加引号,例如
<p id='Element1'>Element 1</p><br>
这不是你的错误的一部分,只是一个小错误
版本
如您所见,它有效
const elements = [
{title: 'Element1'},
{title: 'Element2'},
{title: 'Element3'},
{title: 'Element4'},
{title: 'Element5'}
];
window.onload = () => {
elements.forEach(element => {
const title = document.getElementById(element.title);
//add event listeners
title.addEventListener("mouseover", handleMouseOver = () => {
mouseOver(title);
});
title.addEventListener("mouseout", handleMouseOut = () => {
mouseOut(title);
});
});
};
//play soundfiles
const mouseOver = (title) => {
title.style.backgroundColor = "red";
};
const mouseOut = (title) => {
title.style.backgroundColor = "#4CAF50";
};
body {
margin:0;
margin-left:0em;
padding:0;
overflow: hidden;
}
canvas {
margin:auto;
}
.compositions {
display: inline-block;
align-items: center;
font-style: arial;
font-size: 17px;
list-style-type: none;
text-align: center;
margin-top: 5em;
}
.compositions p {
margin-bottom: 0.8em;
margin:0em 0.8em 1em 1em;
display: inline-block;
}
.compositions input {
background-color: #4CAF50; /* Green */
border: none;
border-radius:50px;
color: white;
padding: 8px 20px;
margin-left: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-style: arial;
font-size: 12px;
}
.compositions p:hover{
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>InteractiveWebsite</title>
<script src="../libraries/p5.js"></script>
<script src="../libraries/p5.dom.js"></script>
<script src="../libraries/p5.sound.js"></script>
<!--script src="../libraries/Tone.js"></script-->
<!--CreateJS libraries-->
<script src="../libraries/soundjs.min.js"></script>
<script src="../libraries/cordovaaudioplugin.min.js"></script>
<script src="../libraries/flashaudioplugin.min.js"></script>
<script src="../libraries/preloadjs.min.js"></script>
<!--Own javascript files-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<main>
<div class="compositions">
<p id='Element1'>Element 1</p><br>
<p id='Element2'>Element 2</p><br>
<p id='Element3'>Element 3</p><br>
<p id='Element4'>Element 4</p><br>
<p id='Element5'>Element 5</p><br>
</div>
</main>
<script src="sketch.js"></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>
我知道您稍后需要播放音频文件,但是当您可能 solve the problem with CSS 时,这是一项非常繁重的工作。通常,您不想用 JavaScript 做您可以用 CSS 做的事。为 CSS.
做不到的事情保存 JavaScript
p {
background-color: #4CAF50;
}
p:hover {
background-color: red;
}
我是网页设计(和编码)的新手,今天下午我遇到了一个我无法独自解决的问题。我希望你们中的一个能帮助我。
我想创建当用户将鼠标悬停在其上时变为绿色,当鼠标再次离开时变为红色的文本元素。 (稍后,当鼠标悬停在特定对象上时,音频文件将开始播放。) 当您 运行 代码时,您可以看到只有最后一个元素变为红色,当鼠标悬停在其他元素上时也是如此。我的 (Javascript) 代码有什么问题?
const elements = [
{title: 'Element1'},
{title: 'Element2'},
{title: 'Element3'},
{title: 'Element4'},
{title: 'Element5'}
];
window.onload = () => {
elements.forEach(element => {
title = document.getElementById(element.title);
//add event listeners
title.addEventListener("mouseover", handleMouseOver = () => {
mouseOver(title);
});
title.addEventListener("mouseout", handleMouseOut = () => {
mouseOut(title);
});
});
};
//play soundfiles
const mouseOver = (title) => {
title.style.backgroundColor = "red";
};
const mouseOut = (title) => {
title.style.backgroundColor = "#4CAF50";
};
body {
margin:0;
margin-left:0em;
padding:0;
overflow: hidden;
}
canvas {
margin:auto;
}
.compositions {
display: inline-block;
align-items: center;
font-style: arial;
font-size: 17px;
list-style-type: none;
text-align: center;
margin-top: 5em;
}
.compositions p {
margin-bottom: 0.8em;
margin:0em 0.8em 1em 1em;
display: inline-block;
}
.compositions input {
background-color: #4CAF50; /* Green */
border: none;
border-radius:50px;
color: white;
padding: 8px 20px;
margin-left: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-style: arial;
font-size: 12px;
}
.compositions p:hover{
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>InteractiveWebsite</title>
<script src="../libraries/p5.js"></script>
<script src="../libraries/p5.dom.js"></script>
<script src="../libraries/p5.sound.js"></script>
<!--script src="../libraries/Tone.js"></script-->
<!--CreateJS libraries-->
<script src="../libraries/soundjs.min.js"></script>
<script src="../libraries/cordovaaudioplugin.min.js"></script>
<script src="../libraries/flashaudioplugin.min.js"></script>
<script src="../libraries/preloadjs.min.js"></script>
<!--Own javascript files-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<main>
<div class="compositions">
<p id=Element1>Element 1</p><br>
<p id=Element2>Element 2</p><br>
<p id=Element3>Element 3</p><br>
<p id=Element4>Element 4</p><br>
<p id=Element5>Element 5</p><br>
</div>
</main>
<script src="sketch.js"></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>
我研究了另外两个主题 (
提前致谢, 芥末整形器
您遇到关闭问题,标题未声明
window.onload = () => {
elements.forEach(element => {
title = document.getElementById(element.title);
//add event listeners
title.addEventListener("mouseover", handleMouseOver = () => {
mouseOver(title);
});
title.addEventListener("mouseout", handleMouseOut = () => {
mouseOut(title);
});
});
}
所以 'default declaration' 似乎在 forEach 之外。只需像 const title = document.getElementById(element.title);
一样声明它,一切都会起作用。
也为 id 属性添加引号,例如
<p id='Element1'>Element 1</p><br>
这不是你的错误的一部分,只是一个小错误
版本
如您所见,它有效
const elements = [
{title: 'Element1'},
{title: 'Element2'},
{title: 'Element3'},
{title: 'Element4'},
{title: 'Element5'}
];
window.onload = () => {
elements.forEach(element => {
const title = document.getElementById(element.title);
//add event listeners
title.addEventListener("mouseover", handleMouseOver = () => {
mouseOver(title);
});
title.addEventListener("mouseout", handleMouseOut = () => {
mouseOut(title);
});
});
};
//play soundfiles
const mouseOver = (title) => {
title.style.backgroundColor = "red";
};
const mouseOut = (title) => {
title.style.backgroundColor = "#4CAF50";
};
body {
margin:0;
margin-left:0em;
padding:0;
overflow: hidden;
}
canvas {
margin:auto;
}
.compositions {
display: inline-block;
align-items: center;
font-style: arial;
font-size: 17px;
list-style-type: none;
text-align: center;
margin-top: 5em;
}
.compositions p {
margin-bottom: 0.8em;
margin:0em 0.8em 1em 1em;
display: inline-block;
}
.compositions input {
background-color: #4CAF50; /* Green */
border: none;
border-radius:50px;
color: white;
padding: 8px 20px;
margin-left: 10px;
text-align: center;
text-decoration: none;
display: inline-block;
font-style: arial;
font-size: 12px;
}
.compositions p:hover{
font-weight: bold;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>InteractiveWebsite</title>
<script src="../libraries/p5.js"></script>
<script src="../libraries/p5.dom.js"></script>
<script src="../libraries/p5.sound.js"></script>
<!--script src="../libraries/Tone.js"></script-->
<!--CreateJS libraries-->
<script src="../libraries/soundjs.min.js"></script>
<script src="../libraries/cordovaaudioplugin.min.js"></script>
<script src="../libraries/flashaudioplugin.min.js"></script>
<script src="../libraries/preloadjs.min.js"></script>
<!--Own javascript files-->
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<main>
<div class="compositions">
<p id='Element1'>Element 1</p><br>
<p id='Element2'>Element 2</p><br>
<p id='Element3'>Element 3</p><br>
<p id='Element4'>Element 4</p><br>
<p id='Element5'>Element 5</p><br>
</div>
</main>
<script src="sketch.js"></script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
</body>
</html>
我知道您稍后需要播放音频文件,但是当您可能 solve the problem with CSS 时,这是一项非常繁重的工作。通常,您不想用 JavaScript 做您可以用 CSS 做的事。为 CSS.
做不到的事情保存 JavaScriptp {
background-color: #4CAF50;
}
p:hover {
background-color: red;
}