Javascript 为什么我的div没有更新它们的背景颜色？

对于类中的项目，我们必须制作一个应用程序，向用户显示存储在JSON文件中的颜色协调。Like direct harmony=另一种颜色的色轮的另一侧的颜色。我制作了一个应用程序，要求用户选择一种颜色，然后选择他们希望为该颜色显示的颜色。该应用程序除了一件事之外还能工作：有时在切换颜色时div不会更新

例如：用户选择红色，然后选择直接。应用程序应显示两个框，一个是红色，另一个是红色的直接和谐，即绿色。然后用户选择黄色和直接。方框应分别变为黄色和蓝色。现在，如果用户再次选择Red和Direct，就会出现问题。只有顶部框会改变颜色，底部框保持蓝色。我只需要显示框中的颜色，innerHTML也不会更新

我不能遵循代码所使用的逻辑序列，就我所知，一切都应该按照预期的方式改变。出什么事了

Javascript:

var primary = document.querySelector('#primary');
var harmony1 = document.querySelector('#harmony1');
var harmony2 = document.querySelector('#harmony2');
var direct = document.querySelector('#direct');
var split = document.querySelector('#split');
var analogous = document.querySelector('#analogous');
var bgColor = "";



fetch("data/data.json")
    .then( (response) => { return response.json() })
    .then((jsonData) => {
        data = jsonData;
    })


function redColor() {

    bgColor = data.colors[0].hex;

    direct.addEventListener("click", redDirectHarmony);
    split.addEventListener("click", redSplitHarmony);
    analogous.addEventListener("click", redAnalogousHarmony);


}

function redDirectHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Red";

    harmony1.style.backgroundColor = data.colors[0].direct[1];
    harmony1.innerHTML = "#00ff00";

    harmony2.style.backgroundColor = "white";
    harmony2.innerHTML = "";

}

function redSplitHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Red";

    harmony1.style.backgroundColor = data.colors[0].split[1];
    harmony1.innerHTML = "#0080ff";

    harmony2.style.backgroundColor = data.colors[0].split[2];
    harmony2.innerHTML = "#00ff80"
}

function redAnalogousHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Red";

    harmony1.style.backgroundColor = data.colors[0].analogous[1];
    harmony1.innerHTML = "#ff8000";

    harmony2.style.backgroundColor = data.colors[0].analogous[2];
    harmony2.innerHTML = "#ff0080";
}

function yellowColor() {

    bgColor = data.colors[1].hex;

    direct.addEventListener("click", yellowDirectHarmony);
    split.addEventListener("click", yellowSplitHarmony);
    analogous.addEventListener("click", yellowAnalogousHarmony);

}

function yellowDirectHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Yellow";

    harmony1.style.backgroundColor = data.colors[1].direct[1];
    harmony1.innerHTML = "#0000ff";

    harmony2.style.backgroundColor = "white";
}

function yellowSplitHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Yellow";

    harmony1.style.backgroundColor = data.colors[1].split[1];
    harmony1.innerHTML = "#8000ff";

    harmony2.style.backgroundColor = data.colors[1].split[2];
    harmony2.innerHTML = "#0080ff"
}

function yellowAnalogousHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Yellow";

    harmony1.style.backgroundColor = data.colors[1].analogous[1];
    harmony1.innerHTML = "#80ff00";

    harmony2.style.backgroundColor = data.colors[1].analogous[2];
    harmony2.innerHTML = "#ff8000";
}

function greenColor() {

    bgColor = data.colors[2].hex;

    direct.addEventListener("click", greenDirectHarmony);
    split.addEventListener("click", greenSplitHarmony);
    analogous.addEventListener("click", greenAnalogousHarmony);

}

function greenDirectHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Green";

    harmony1.style.backgroundColor = data.colors[2].direct[1];
    harmony1.innerHTML = "#800080";

    harmony2.style.backgroundColor = "white";
}

function greenSplitHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Green";

    harmony1.style.backgroundColor = data.colors[2].split[1];
    harmony1.innerHTML = "#800040";

    harmony2.style.backgroundColor = data.colors[2].split[2];
    harmony2.innerHTML = "#400080";
}

function greenAnalogousHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Green";

    harmony1.style.backgroundColor = data.colors[2].analogous[1];
    harmony1.innerHTML = "#008040";

    harmony2.style.backgroundColor = data.colors[2].analogous[2];
    harmony2.innerHTML = "#408000";
}

function blueColor() {

    bgColor = data.colors[3].hex;

    direct.addEventListener("click", blueDirectHarmony);
    split.addEventListener("click", blueSplitHarmony);
    analogous.addEventListener("click", blueAnalogousHarmony);

}

function blueDirectHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Blue";

    harmony1.style.backgroundColor = data.colors[3].direct[1];
    harmony1.innerHTML = "#ffff00";

    harmony2.style.backgroundColor = "white";
}

function blueSplitHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Blue";

    harmony1.style.backgroundColor = data.colors[3].split[1];
    harmony1.innerHTML = "#80ff00";

    harmony2.style.backgroundColor = data.colors[3].split[2];
    harmony2.innerHTML = "#ff8000";
}

function blueAnalogousHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Blue";

    harmony1.style.backgroundColor = data.colors[3].analogous[1];
    harmony1.innerHTML = "#8000ff";

    harmony2.style.backgroundColor = data.colors[3].analogous[2];
    harmony2.innerHTML = "#0080ff";
}

function orangeColor() {

    bgColor = data.colors[4].hex;

    direct.addEventListener("click", orangeDirectHarmony);
    split.addEventListener("click", orangeSplitHarmony);
    analogous.addEventListener("click", orangeAnalogousHarmony);

}

function orangeDirectHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Orange";

    harmony1.style.backgroundColor = data.colors[4].direct[1];
    harmony1.innerHTML = "#0059ff";

    harmony2.style.backgroundColor = "white";
}

function orangeSplitHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Orange";

    harmony1.style.backgroundColor = data.colors[4].split[1];
    harmony1.innerHTML = "#2600ff";

    harmony2.style.backgroundColor = data.colors[4].split[2];
    harmony2.innerHTML = "#00d9ff";
}

function orangeAnalogousHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Orange";

    harmony1.style.backgroundColor = data.colors[4].analogous[1];
    harmony1.innerHTML = "#d9ff00";

    harmony2.style.backgroundColor = data.colors[4].analogous[2];
    harmony2.innerHTML = "#ff2600";
}

function violetColor() {

    bgColor = data.colors[5].hex;

    direct.addEventListener("click", violetDirectHarmony);
    split.addEventListener("click", violetSplitHarmony);
    analogous.addEventListener("click", violetAnalogousHarmony);

}

function violetDirectHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Violet";

    harmony1.style.backgroundColor = data.colors[4].direct[1];
    harmony1.innerHTML = "#82ee82";

    harmony2.style.backgroundColor = "white";
}

function violetSplitHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Violet";

    harmony1.style.backgroundColor = data.colors[4].split[1];
    harmony1.innerHTML = "#82eeb8";

    harmony2.style.backgroundColor = data.colors[4].split[2];
    harmony2.innerHTML = "#b8ee82";
}

function violetAnalogousHarmony() {

    primary.style.backgroundColor = bgColor;
    primary.innerHTML = "Violet";

    harmony1.style.backgroundColor = data.colors[4].analogous[1];
    harmony1.innerHTML = "#ee82b8";

    harmony2.style.backgroundColor = data.colors[4].analogous[2];
    harmony2.innerHTML = "#b882ee";
}

我不知道问题是否来自实际的JSON文件，但以防万一，这里说的是JSON：

{
  "colors": [
    {
      "color": "red",
      "hex": "#FF0000",
      "direct": ["#FF0000","#00ff00"],
      "analogous": ["#FF0000","#ff8000", "#ff0080"],
      "split": ["#FF0000","#0080ff", "#00ff80"]
    },
    {
      "color": "yellow",
      "hex": "#FFFF00",
      "direct": ["#FFFF00","#0000ff"],
      "analogous": ["#FFFF00","#80ff00", "#ff8000"],
      "split": ["#FFFF00","#8000ff", "#0080ff"]
    },
    {
      "color": "green",
      "hex": "#008000",
      "direct": ["#008000","#800080"],
      "analogous": ["#008000","#008040", "#408000"],
      "split": ["#008000","#800040", "#400080"]
    },
    {
      "color": "blue",
      "hex": "#0000FF",
      "direct": ["#0000FF","#ffff00"],
      "analogous": ["#0000FF","#8000ff", "#0080ff"],
      "split": ["#0000FF","#80ff00", "#ff8000"]
    },
    {
      "color": "orange",
      "hex": "#FFA500",
      "direct":["#FFA500","#0059ff"],
      "analogous": ["#FFA500","#d9ff00", "#ff2600"],
      "split": ["#FFA500","#2600ff", "#00d9ff"]
    },
    {
      "color": "violet",
      "hex": "#EE82EE",
      "direct": ["#EE82EE","#82ee82"],
      "analogous": ["#EE82EE","#ee82b8", "#b882ee"],
      "split": ["#EE82EE","#82eeb8", "#b8ee82"]
    }
  ]
}

---

问题在于您使用事件侦听器的方式。每次单击颜色时，都会添加一个新的侦听器。然后，当您单击direct时，它会按顺序处理所有侦听器。所以您设置了红色，添加了红色的直接侦听器，然后设置了黄色，添加了黄色的直接侦听器，然后又设置了红色，但是已经有了一个红色的侦听器，它不会再添加了。如果您单步执行代码，或添加警报，或以某种方式更改行为以记录调用的方法，您将看到，如果单击红色，然后单击黄色，它实际上会在单击direct后调用这两个方法-redDirectHarmony first，然后是yellowDirectHarmony

如果是红色/黄色/红色场景，则此后不会再次调用redDirectHarmony，因为它没有两次添加事件侦听器

您应该重构，以便每个按钮函数只有一个方法

简化示例：

var primary=document.querySelector'primary'； var harmony1=document.querySelector'harmony1'； var harmony2=document.querySelector'harmony2'； var direct=document.querySelectordirect； var myColor={}； 风险值数据={ 颜色：[ { 颜色：红色， 十六进制：FF0000， 直接：[FF0000,00ff00]， 类似：[FF0000，ff8000，ff0080]， 拆分：[FF00000080FF，00ff80] }, { 颜色：黄色， 十六进制：FFFF00， 直接：[FFFF000000FF]， 类似：[FFFF00,80ff00,ff8000]， 拆分：[FFFF008000FF，0080ff] }, { 颜色：绿色， 十六进制：008000， 直接：[008000800080]， 类似：[0080000804040408000]， 拆分：[00800080004040400080] }, { 颜色：蓝色， 十六进制：0000FF， 直接：[0000FF，ffff00]， 类似：[0000FF、8000ff、0080ff]， 拆分：[0000FF，80ff00，ff8000] }, { 颜色：橙色， 十六进制：FFA500， 直接：[FFA5000059FF]， 类似：[FFA500，d9ff00，ff2600]， 拆分：[ffa5002600ff，00d9ff] }, { 颜色：紫色， 十六进制：EE82EE， 直接：[EE82EE，82ee82]， 类似：[EE82EE，ee82b8，b882ee]， 拆分：[EE82EE，82eeb8，b8ee82] } ] }; 函数setColorName{ 对于变量i=0；i你能把你的代码缩减到a吗。另外，如何调用这些函数？fetch是异步的。基本上，您的其他函数不知道数据是什么。当您有权访问数据时，需要更改它们的颜色。ie:在设置数据的提取回调中。@Andy这是HTML中的一系列按钮。我把它设置成这样，直到用户首先选择一种颜色，和谐按钮才起作用。按钮在HTML中有onClick。有一件事可以帮助您解决这个问题，那就是删除函数开头的颜色名称。您应该能够拥有一个带有动态值参数的颜色函数。如果您使用CSS类而不是直接应用样式，可能会更简单。