Всем привет! Хотела бы уточнить 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 раз нажать на кнопку, а потом не реагирует на последующие нажатия. Буду очень благодарна вашей помощи!

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

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

Всем привет! Хотела бы уточнить 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 раз нажать на кнопку, а потом не реагирует на последующие нажатия. Буду очень благодарна вашей помощи!

Всем привет! Хотела бы уточнить 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 раз нажать на кнопку, а потом не реагирует на последующие нажатия. Буду очень благодарна вашей помощи!