Question

对于班级中的项目，我们必须创建一个应用程序，以向用户显示存储在JSON文件中的颜色和声。（例如，直接和声=另一种颜色的色轮另一侧的颜色。）我制作了一个应用程序，要求用户选择一种颜色，然后选择他们想要为该颜色显示的颜色和声。该应用程序的工作原理除以下几点外：有时div在切换颜色时不会更新。

示例：用户选择红色，然后选择直接。应用程序应显示2个框，一个为红色，另一个为红色的直接和声，即绿色。然后，用户选择黄色和直接。框应分别更改为黄色和蓝色。现在，如果用户要再次选择“红色”和“直接”，则会出现问题。只有顶部框更改颜色，底部框保持蓝色。而且，仅显示框内颜色的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"]
    }
  ]
}

Answer 1

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

您应该重构，以便每个按钮功能只有一种方法。简化示例：

redDirectHarmony

var primary = document.querySelector('#primary');
var harmony1 = document.querySelector('#harmony1');
var harmony2 = document.querySelector('#harmony2');
var direct = document.querySelector("#direct");
var myColor = { };
var data = {
  "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"]
}
  ]
};


function setColor(colorName) {
   for (var i = 0; i < data.colors.length; i++)
   {
       if (data.colors[i].color == colorName)
       {
          myColor = data.colors[i];
          primary.style.backgroundColor = myColor.hex;
          primary.innerHTML = myColor.color;

       }
   }
}



function directHarmony() {


harmony1.style.backgroundColor = myColor.direct[1];
harmony1.innerHTML = myColor.direct[1];


}

为什么我的div不更新其背景颜色？

1 个答案: