Issue
This the code I wrote in order to find the answer to a programming challenge and it's to insert elements into a element with the values equal to color names and choosing a color form the list will change the color of the below it and it's supposed to be JS only. But my problem is that my code works perfectly on Firefox ,but it does not work in chrome or other browsers.
const color = [
"red",
"black",
"blue"
];
let select = document.getElementById("select");
for (let i = 0; i < color.length; i++) {
let container = document.createElement("option");
container.innerText = color[i];
container.value = color[i];
container.id = i+1;
select.append(container);
}
for (let j = 1; j <= color.length; j++) {
select[j].addEventListener("click", function colorChange() {
document.getElementById("box").style.backgroundColor = `${select[j].value}`;
});
}#box {
width: 50px;
height: 50px;
border: 1px solid green;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test</title>
</head>
<body>
<select name="" id="select">
<option value="">Choose a color</option>
</select>
<div id="box">
</div>
<script src="script.js">
</script>
</body>
</html>
Solution
Well good news, this isn't because of JavaScript is disabled on the browser. I tried running your code against Firefox and Vivaldi and it seems that Vivaldi, Google Chrome, and other Chromium-based web browsers ignored your request to insert an event trigger. I mean this part of your code:
for (let j = 1; j <= color.length; j++) {
select[j].addEventListener("click", function colorChange() {
document.getElementById("box").style.backgroundColor = `${select[j].value}`;
});
}
I don't know which one is correct: whether event triggers can be added inside the <option> tags inside a <select> or not. I might want to forward this issue to my team over Webcompat.com.
Since you have already assigned the values for each <option> (see container.value = color[i];), you don't actually need to add these event triggers for each of the <option>s. Instead, you can place the trigger directly inside the <select> element, replacing your second loop into this:
select.addEventListener("click", function colorChange() {
document.getElementById("box").style.backgroundColor = select.value;
});
So the overall code would look like this:
const color = [
"red",
"black",
"blue"
];
let select = document.getElementById("select");
for (let i = 0; i < color.length; i++) {
let container = document.createElement("option");
container.innerText = color[i];
container.value = color[i];
container.id = i+1;
select.append(container);
}
for (let j = 1; j <= color.length; j++) {
select[j].addEventListener("click", function colorChange() {
document.getElementById("box").style.backgroundColor = `${select[j].value}`;
});
}
select.addEventListener("click", function colorChange() {
document.getElementById("box").style.backgroundColor = select.value;
});
Edit: using the change listener instead of click would be a better idea since the colorChange() function will only be executed if the dropdown value has been changed. Thanks to pyb for pointing this out.
Update: I have forwarded this to https://github.com/webcompat/web-bugs/issues/97662.
Answered By - Reinhart Previano
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.