JS在googlechrome中不起作用，它只在firefox上起作用-有解無憂

這是我為了找到編程挑戰的答案而撰寫的代碼，它是將元素插入到一個元素中，其值等于顏色名稱并選擇一種顏色形式串列將改變它下面的顏色，它應該是僅限JS。但我的問題是我的代碼在 Firefox 上運行良好，但在 chrome 或其他瀏覽器中不起作用。

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>

uj5u.com熱心網友回復：

好訊息，這不是因為 JavaScript 在瀏覽器上被禁用。我嘗試針對 Firefox 和 Vivaldi 運行您的代碼，但似乎 Vivaldi、Google Chrome 和其他基于 Chromium 的網路瀏覽器忽略了您插入事件觸發器的請求。我的意思是這部分代碼：

for (let j = 1; j <= color.length; j  ) {
    select[j].addEventListener("click", function colorChange() {
    document.getElementById("box").style.backgroundColor = `${select[j].value}`;
    });
}

我不知道哪個是正確的：是否可以<option>在 a 中的標簽中添加事件觸發器<select>。我可能想通過Webcompat.com將此問題轉發給我的團隊。

由于您已經value為每個 s分配了s <option>（參見container.value = color[i];），您實際上不需要為每個<option>s添加這些事件觸發器。相反，您可以將觸發器直接放在<select>元素內，將第二個回圈替換為：

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

所以整體代碼看起來像這樣：

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

編輯：使用change偵聽器而不是click一個更好的主意，因為colorChange()只有在更改下拉值時才會執行該函式。由于PYB的指出了這一點。

更新：我已將此轉發到https://github.com/webcompat/web-bugs/issues/97662。

uj5u.com熱心網友回復：

當代碼在單個瀏覽器 ant 中運行而不在其他瀏覽器中運行時，這表明您的代碼撰寫不正確。它在 Firefox 中運行這一事實是有道理的，因為該瀏覽器通常支持尚未在全球范圍內支持的實驗性選項。

查看您的代碼，我發現了一些問題，例如在事件偵聽器中按名稱宣告函式。在我看來，將偵聽器設定為選項元素會適得其反，因此我將其更改為更標準/更有用的change偵聽器。

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>

uj5u.com熱心網友回復：

我通過進行以下更改使其作業：

change在選擇上使用一個事件偵聽器
將所選option元素稱為this
在事件偵聽器中更改`${select[j].value}`為this.value

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

uj5u.com熱心網友回復：

它與如何在 Firefox 和其他瀏覽器中實作 select/option 的事件冒泡有關。

試試這個簡單的代碼：

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 記錄它被點擊，而 Chrome 沒有。

或者試試這個代碼：

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 報告option被點擊，而 Chrome 報告select被點擊。

uj5u.com熱心網友回復：

如果這在 Firefox 中正常作業，可能是在 chrome JavaScript 中被禁用。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/401210.html

標籤：javascript html css

上一篇：Javascript似乎不適用于滑動注冊/登錄表單，但適用于codepen

下一篇：使用現有的javascript影片參考網站的一部分