Почему мои div не обновляют свой цвет фона? - PullRequest
Новая
       6

Почему мои div не обновляют свой цвет фона?

0 голосов
/ 06 декабря 2018

Для проекта в классе мы должны создать приложение, которое отображает пользователю гармонии цвета, которые хранятся в файле JSON.(Например, прямая гармония = цвет на противоположной стороне цветового круга другого цвета.) Я создал приложение, в котором пользователь должен выбрать цвет, а затем выбрать цветовую гармонию, которую он хотел бы отобразить для этого цвета.Приложение работает за исключением одной вещи: иногда div не обновляются при переключении цветов.

Пример: пользователь выбирает красный, а затем прямой.Приложение должно отображать 2 поля, одно из которых красное, а другое - прямую гармонию красного, зеленого.Затем пользователь выбирает Желтый и Прямой.Коробки должны измениться на Желтый и Синий соответственно.Теперь проблема возникает, если пользователь снова должен выбрать 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"]
    }
  ]
}

1 Ответ

0 голосов
/ 07 декабря 2018

Ваша проблема в том, как вы используете прослушиватели событий.Каждый раз, когда вы нажимаете цвет, вы добавляете нового слушателя.Затем, когда вы нажимаете direct, он обрабатывает всех слушателей по порядку.Таким образом, вы устанавливаете красный, добавляете красный прямой слушатель, затем устанавливаете желтый, добавляете желтый прямой слушатель, затем снова красный, но уже есть красный слушатель, и он больше не будет добавляться.Если вы шагаете по коду, добавляете оповещения или изменяете поведение каким-либо образом, который позволяет вам регистрировать, какие методы вызываются, вы увидите, что если вы нажмете красный, а затем желтый, то он фактически вызывает оба метода - 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...