Блог

Главная - Вопросы по программированию - изменить цвет окна с помощью выпадающего меню в javascript

изменить цвет окна с помощью выпадающего меню в javascript

#javascript

#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>

Комментарии:

1. Не могли бы вы, пожалуйста, описать проблему, с которой вы столкнулись?

Ответ №1:

Взгляните на этот код, я добавил ширину и высоту в поле #, чтобы оно было видимым (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>

Ответ №2:

Вы должны добавить строку newBox.style.backgroundColor = ... в прослушиватель событий, который выполняется при изменении. В вашем коде вы запускаете его при инициализации. Другая деталь заключается в том, что ваш div был пустым (возможно, невидимым), я добавил amp;nbsp; (пробел), чтобы убедиться, что он будет виден.

 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">amp;nbsp;</div>

    <script src="script.js"></script>
  </body>
</html>