Question

我想使用颜色在数组中的下拉菜单更改框（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>

Answer 1

看一下这段代码，我在#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>

Answer 2

您必须将 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>

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

2 个答案: