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 раз нажать на кнопку, а потом не реагирует на последующие нажатия.

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

• Sergey: так у вас функция generateHex просто перебирает объект в цикле for и сразу возвращает первый элемент из за return, до второго return'a код даже не доходит, да и не понятно зачем он тут
• Sergey: если вы хотите менять фон последовательно, создайте массив объектов с цветами, а по нажатию на кнопку возвращайте i + 1ый элемент
• Sergey: или случайный цвет, как угодно
• Sofia Savescu: Sergey, спасибо Вам за ответ. Да, оказалось все из-за второго return'a.

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й значение.

• Sofia Savescu: SwaD, огромное Вам спасибо за совет. Теперь все прекрасно! Подумала над Вашим вариантом, осознала вроде. Все работает как надо!
• Sofia Savescu: сделала, еще раз большое спасибо за помощь :))
• SwaD: Обращайтесь, тут всегда рады помочь )