Попробуйте исправить свой код вот такУ вас ошибка была в том, что вы в цикле 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й значение.
Попробуйте исправить свой код вот так:
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> У вас ошибка была в том, что вы в цикле 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й значение.
Попробуйте исправить свой код вот так:
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>lang-js