时间戳

首页 > 解决方案 > 为什么我的 div 没有更新它们的背景颜色？

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

问题描述

对于课堂上的项目，我们必须制作一个应用程序，向用户显示存储在 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"]
    }
  ]
}

标签： javascriptjsonbackground-color

解决方案

您的问题在于您使用事件侦听器的方式。每次单击颜色时，都会添加一个新侦听器。然后当您单击直接时，它会按顺序处理所有侦听器。所以你设置红色，添加红色直接侦听器，然后设置黄色，添加黄色直接侦听器，然后再次红色，但是已经有一个红色侦听器，它不会再次添加。如果您单步执行代码或添加警报或以某种方式更改行为以记录调用了哪些方法，您会看到，如果您单击红色，然后单击黄色，它实际上是在调用这两种方法 -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];
}
<button onclick="setColor('red')">red</button>
<button onclick="setColor('yellow')">yellow</button>
<button id="direct" onclick="directHarmony()">Direct</button>
<div id="primary">
primary
</div>
<div id="harmony1">
harmony1
</div>
<div id="harmony2">
harmony2
</div>

推荐阅读