change box color using drop down menu in javascript
Question
I want to change the color of a box(div tag) using drop down menu which colors are in a array. when each color is selected, box background should change to that color and after 1000 millisecond changes to silver.
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 answers
solution1
1 ACCPTED 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
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>
solution2
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. In your code you are running it in the initialization. Other detail is that you div was empty (possibly invisible), I added a (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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.