admin管理员组

文章数量:1025244

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>

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>

  • javascript
  • html
  • css
Share Improve this question edited Jan 2, 2022 at 8:32 pyb 5,2992 gold badges29 silver badges46 bronze badges asked Jan 2, 2022 at 8:13 sina_bynsina_byn 1472 silver badges11 bronze badges 4
  • How do you test it? Do you open the HTML file from your file explorer or do you serve it from a local server? If it's the former, some browsers disallow loading local JS. – pyb Commented Jan 2, 2022 at 8:27
  • Wow this seems interesting, When I opened this same browser and tested in edge it wasn't changing but in firefox it is changing – prosach Commented Jan 2, 2022 at 8:29
  • Should the first select[j] be option[j]? – wazz Commented Jan 2, 2022 at 8:38
  • 1 I just tested it and you can't add event listener (at least a "click") to option... Well you can, but it won't work in Chrome. – digitalniweb Commented Jan 2, 2022 at 8:48
Add a ment  | 

5 Answers 5

Reset to default 2

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 Webpat..

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./webpat/web-bugs/issues/97662.

When the code works in a single browser ant not in the rest, it's an indicator that your code isn't written properly. The fact that it runs in Firefox makes some sense, because this browser usually supports experimental options that are not yet supported globally.

Looking at your code, I found some issues, like declaring a function by name within event listener. Setting a listener to an option element is counter productive in my opinion, so I changed it to a more standard/useful change listener.

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);
}

// Select an option will trigger the change event.
select.addEventListener("change", function() {
    document.getElementById("box").style.backgroundColor = this.value;
});
#box {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
<select name="" id="select">
  <option value="">Choose a color</option>
</select>
<div id="box"></div>

I got it working by making the following changes:

  1. Use one change event listener on the select
  2. Refer to the selected option element as this
  3. Change `${select[j].value}` to this.value in the event listener
<!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>

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);
}

select.addEventListener("change", function colorChange() {
    document.getElementById("box").style.backgroundColor = this.value;
});

It has something to do with how event bubbling for select/option is implemented in Firefox and other browsers.

Try this simple code:

document.querySelectorAll("option").forEach(item => item.addEventListener("click", () => {
    console.log("clicked")
}))
<!DOCTYPE html>
<html lang="en">

 <head>
      <meta charset="UTF-8">
      <title>Test</title>
 </head>

 <body>
       <select name="" id="select">
       <option value="1">1</option>
       <option value="2">2</option>
       </select>
</body>
</html>

Firefox logs that it's clicked, while Chrome doesn't.

Or try this code:

document.querySelector("select").addEventListener("click", (e) => {
    console.log(e.target)
})
<!DOCTYPE html>
<html lang="en">

 <head>
      <meta charset="UTF-8">
      <title>Test</title>
 </head>

 <body>
       <select name="" id="select">
       <option value="1">1</option>
       <option value="2">2</option>
       </select>
</body>


</html>

Firefox reports that option was clicked, while Chrome reports that select was clicked.

If this works properly in Firefox might be in chrome JavaScript is disabled.

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>

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>

  • javascript
  • html
  • css
Share Improve this question edited Jan 2, 2022 at 8:32 pyb 5,2992 gold badges29 silver badges46 bronze badges asked Jan 2, 2022 at 8:13 sina_bynsina_byn 1472 silver badges11 bronze badges 4
  • How do you test it? Do you open the HTML file from your file explorer or do you serve it from a local server? If it's the former, some browsers disallow loading local JS. – pyb Commented Jan 2, 2022 at 8:27
  • Wow this seems interesting, When I opened this same browser and tested in edge it wasn't changing but in firefox it is changing – prosach Commented Jan 2, 2022 at 8:29
  • Should the first select[j] be option[j]? – wazz Commented Jan 2, 2022 at 8:38
  • 1 I just tested it and you can't add event listener (at least a "click") to option... Well you can, but it won't work in Chrome. – digitalniweb Commented Jan 2, 2022 at 8:48
Add a ment  | 

5 Answers 5

Reset to default 2

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 Webpat..

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./webpat/web-bugs/issues/97662.

When the code works in a single browser ant not in the rest, it's an indicator that your code isn't written properly. The fact that it runs in Firefox makes some sense, because this browser usually supports experimental options that are not yet supported globally.

Looking at your code, I found some issues, like declaring a function by name within event listener. Setting a listener to an option element is counter productive in my opinion, so I changed it to a more standard/useful change listener.

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);
}

// Select an option will trigger the change event.
select.addEventListener("change", function() {
    document.getElementById("box").style.backgroundColor = this.value;
});
#box {
  width: 50px;
  height: 50px;
  border: 1px solid green;
}
<select name="" id="select">
  <option value="">Choose a color</option>
</select>
<div id="box"></div>

I got it working by making the following changes:

  1. Use one change event listener on the select
  2. Refer to the selected option element as this
  3. Change `${select[j].value}` to this.value in the event listener
<!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>

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);
}

select.addEventListener("change", function colorChange() {
    document.getElementById("box").style.backgroundColor = this.value;
});

It has something to do with how event bubbling for select/option is implemented in Firefox and other browsers.

Try this simple code:

document.querySelectorAll("option").forEach(item => item.addEventListener("click", () => {
    console.log("clicked")
}))
<!DOCTYPE html>
<html lang="en">

 <head>
      <meta charset="UTF-8">
      <title>Test</title>
 </head>

 <body>
       <select name="" id="select">
       <option value="1">1</option>
       <option value="2">2</option>
       </select>
</body>
</html>

Firefox logs that it's clicked, while Chrome doesn't.

Or try this code:

document.querySelector("select").addEventListener("click", (e) => {
    console.log(e.target)
})
<!DOCTYPE html>
<html lang="en">

 <head>
      <meta charset="UTF-8">
      <title>Test</title>
 </head>

 <body>
       <select name="" id="select">
       <option value="1">1</option>
       <option value="2">2</option>
       </select>
</body>


</html>

Firefox reports that option was clicked, while Chrome reports that select was clicked.

If this works properly in Firefox might be in chrome JavaScript is disabled.

本文标签： javascriptJS does not work in google chrome and it only works on firefoxStack Overflow

版权声明：本文标题：javascript - JS does not work in google chrome and it only works on firefox - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745618651a2159442.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。