使用 javascript 中的下拉菜单更改框颜色
[英]change box color using drop down menu in javascript
问题描述
I want to change the color of a box(div tag) using drop down menu which colors are in a array.
我想使用 colors 在数组中的下拉菜单更改框（div 标签）的颜色。 when each color is selected, box background should change to that color and after 1000 millisecond changes to silver.选择每种颜色时，框背景应更改为该颜色，并在 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>
2 个解决方案
解决方案1
1 已采纳 2021-02-09 21:31:40
Take a look at this code, I added a width an height to the #box to be visible (CSS), Also, removed couple lines from your each loop because they are not required, moved colorSelect out of the loop because we want to use it to within the loop and outside for the eventListener assignation, this last one will be responsible for triggering the required action and change the color of the box, we also need the timeout to be within that eventListener function so it will run every time the color is changed, otherwise just move it back to where it was看看这段代码，我在#box 中添加了一个宽度和高度以使其可见（CSS），另外，从each循环中删除了几行，因为它们不是必需的，将colorSelect移出循环，因为我们想使用它在循环内部和外部进行eventListener分配，最后一个将负责触发所需的操作并更改框的颜色，我们还需要超时在该 eventListener function 内，所以它会在每次颜色时运行已更改，否则只需将其移回原来的位置
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
1 2021-02-09 21:38:21
You have to add the line newBox.style.backgroundColor =... to an event listener that is executed when the change happens.您必须将行newBox.style.backgroundColor =...添加到发生更改时执行的事件侦听器。 In your code you are running it in the initialization.在您的代码中，您在初始化中运行它。 Other detail is that you div was empty (possibly invisible), I added a 其他细节是你的 div 是空的（可能是不可见的），我添加了一个 (white space) to ensure it will be visible. （空白）以确保它是可见的。
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"> </div> <script src="script.js"></script> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.