在javascript中使用下拉菜单改变框的颜色

我想改变一个框(div标签)的颜色使用下拉菜单的颜色是在一个数组。当每一种颜色被选择时，盒子背景应该改变为该颜色，并在1000毫秒后改变为银色。

const data = [
"Teal",
"SkyBlue",
"DarkSeaGreen",
"Purple",
"LightPink",
"Crimson",
];
const defaultColor = "Silver";

data.forEach((item) => {
let colorSelect = document.querySelector("#color-select");
let node = document.createElement("option");
colorSelect.append(node);
node.setAttribute("value", `${item}`);
node.innerHTML = `${item}`;
let newBox = document.querySelector("#box");
newBox.style.backgroundColor = node.value;

console.log(node);
});
setTimeout(() => {
document.querySelector("#box").style.backgroundColor = defaultColor;
}, 1000);

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>رنگ‌ها!</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<select id="color-select">
<option value="">یک رنگ را انتخاب کنید</option>
</select>
<div id="box"></div>
<script src="script.js"></script>
</body>
</html>

看一下这段代码，我为#box添加了一个宽度和高度，使其可见(CSS)，此外，从each循环中删除了几行，因为它们不是必需的，将colorSelect移出循环，因为我们想在循环内和循环外使用它来分配eventListener，最后一个将负责触发所需的动作并改变盒子的颜色，我们还需要在eventListener函数中设置超时，以便每次改变颜色时它都会运行，否则只需将其移回

const data = [
"Teal",
"SkyBlue",
"DarkSeaGreen",
"Purple",
"LightPink",
"Crimson",
];
const defaultColor = "Silver";
const colorSelect = document.querySelector("#color-select");
data.forEach((item) => {
let node = document.createElement("option");
colorSelect.append(node);
node.setAttribute("value", `${item}`);
node.innerHTML = `${item}`;
});
colorSelect.addEventListener('change',function(evt) {
document.querySelector("#box").style.backgroundColor = evt.target.value
setTimeout(() => {
document.querySelector("#box").style.backgroundColor = defaultColor;
}, 1000);
});

#box {
background-color: Silver;
height: 500px;
width: 500px;
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>رنگ‌ها!</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<select id="color-select">
<option value="">یک رنگ را انتخاب کنید</option>
</select>
<div id="box"></div>
<script src="script.js"></script>
</body>
</html>

您必须将newBox.style.backgroundColor = ...行添加到发生更改时执行的事件侦听器中。在您的代码中，您在初始化时运行它。其他细节是，你的div是空的(可能不可见)，我添加了一个 (空白)，以确保它将是可见的。

const data = [
"Teal",
"SkyBlue",
"DarkSeaGreen",
"Purple",
"LightPink",
"Crimson",
];
const defaultColor = "Silver";
const colorSelect = document.querySelector("#color-select");
const newBox = document.querySelector("#box");
data.forEach((item) => {
let node = document.createElement("option");
colorSelect.append(node);
node.setAttribute("value", `${item}`);
node.innerHTML = `${item}`;


console.log(node);
});
colorSelect.addEventListener('change', () => {
newBox.style.backgroundColor = colorSelect.value;
})
setTimeout(() => {
document.querySelector("#box").style.backgroundColor = defaultColor;
}, 1000);

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>رنگ‌ها!</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<select id="color-select">
<option value="">یک رنگ را انتخاب کنید</option>
</select>
<div id="box">&nbsp;</div>
<script src="script.js"></script>
</body>
</html>

相关内容

最新更新

热门标签：