Background changer на JS

Question

Хотела бы уточнить 1 деталь касательно одного проекта, который я сейчас делаю. В общем, дело в том, что я хочу его немного изменить, но за 2 часа не получилось этого сделать, потому решила поискать помощи тут.

При оригинальном коде мы видим на странице такой текст - Background colour: #00ffff (например). А мне бы хотелось чтобы это выглядело так- Background colour: Aqua.

Т.е., чтобы цвет писался словами. Ниже я сперва покажу оригинальный код, а затем со своими попытками достичь результат. Сразу скажу, что при моем варианте я смогла достичь того, что при первом нажатии на кнопку все ок, но при последующих нажатиях вообще ничего не происходит. Моя идея была в том, чтоб система шла по объекту и по очереди выводила названия цветов. Но вот выводит почему-то только первый цвет и на этом все.

Изначальный код

const button = document.getElementById("btn");
const color = document.querySelector(".color");

const hex = [ 
"0",
"1",
"2",
"3",
"4",
"5",
"6",
"7",
"8",
"9",
"A",
"B",
"C",
"D",
"E",
"F"
];

button.addEventListener("click", () => {
  let hexColor = generateHex();
  document.body.style.backgroundColor = hexColor;
  color.textContent = hexColor;
});

function generateHex() {
let hexColor = "#"
     for (let i = 0; i < 6; i++) {
        hexColor += hex[getRandomNumber()]
   }
     return hexColor;
 }

function getRandomNumber() {
return Math.floor(Math.random() * hex.length);
}
}

Измененный код

const button = document.getElementById("btn");
const color = document.querySelector(".color");

button.addEventListener("click", () => {
  let hexColor = generateHex();
  document.body.style.backgroundColor = hexColor;
  color.textContent = hexColor;
});

function generateHex() {

  const newObject = {
  Aqua: "#00ffff",
  Gray: "#808080",
  Navy: "#000080",
  Green: "#008000",
  Olive: "#808000"
  };

  for (const key in newObject ) {
    
      return(key);
    
  }
  const keys = Object.keys(newObject);

keys.forEach(key => {
  return(key);
});

}

Пробовала и другие варианты, но результат 1 - дает только 1 раз нажать на кнопку, а потом не реагирует на последующие нажатия.

Буду очень благодарна вашей помощи!

Answer 1

У вас ошибка была в том, что вы в цикле for делали return. return прерывает выполнение цикла и функции, таким образом получали всегда ключ Aqua, т.к. он идет первым в вашем объекте.

Исправить поведение можно следующим образом:

const button = document.getElementById("btn");
const color = document.querySelector(".color");

button.addEventListener("click", () => {
  let hexColor = generateHex();
  document.body.style.backgroundColor = hexColor[1];
  color.textContent = hexColor[0];
});


function generateHex() {

  const newObject = {
    Aqua: "#00ffff",
    Gray: "#808080",
    Navy: "#000080",
    Green: "#008000", 
    Olive: "#808000" 
  };

  const colorArr = Object.entries(newObject);
  return colorArr[Math.round(Math.random() * (colorArr.length - 1))];
}

<div class="color"></div>
<button id='btn'>Жмяк</button>

Функция возвращает массив из 2х элементов. 1й элемент ключ, 2й значение.

БЛОГ НА HUSL

Background changer на JS

Ответы (1 шт):