В документе уже добавлен заголовок и пять элементов кнопок с цветами.
При нажатии на любую из кнопок, цвет текста заголовка h2 должен меняться на указанный на кнопке.
Для изменения цвета добавь свойство color через атрибут style.
Больше никаких стилей не изменяй; используй внутренний скрипт.
<!DOCTYPE html>
<html>
<head>
<title>Colored header</title>
<style>
* {
font-family: monospace;
text-align: center;
}
.container {
display: grid;
gap: 8px;
grid-template-columns: repeat(5, 100px);
justify-content: center;
}
.color-button {
text-align: center;
font-size: 18px;
padding: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Change my color</h2>
<div class="container">
<div class="color-button" style="background-color: #C4D6B0;">#C4D6B0</div>
<div class="color-button" style="background-color: #477998; color: white">#477998</div>
<div class="color-button" style="background-color: #291F1E; color: white">#291F1E</div>
<div class="color-button" style="background-color: #F64740; color: white">#F64740</div>
<div class="color-button" style="background-color: #A3333D; color: white">#A3333D</div>
</div>
<script>
const a = document.querySelector('.container');
const h = document.querySelector('h2');
a.addEventListener('click', (event) => {
const rpg = event.target.innerHTML
h.setAttribute('style', 'color: rpg');
console.log(rpg);
});
</script>
</body>
</html>
Не могу понять почему не работает. В консоль выводит нужный код цвета.