У меня есть HTML-код:
<div class="block">
<form method="post">
<p>Имя:</p>
<p>Курс:</p>
<p>Город:</p>
<input type="button" name="grey" value="red" id="red">
<input type="button" name="red" value="blue" id="blue">
</form>
</div>
<style>
.block {
backgroung: red;
width: 600px;
height: 200px;
margin: 0 auto;
padding-top: 5px;
margin-bottom: 20px;
}
.block p {
margin-left: 10px;
}
</style>
Нужно сделать так, чтобы блок <div class="block">
менял свой цвет при нажатии на кнопку <input type="button" name="grey" value="red" id="red">
либо <input type="button" name="red" value="blue" id="blue">
.
Для этого я написал код на JS:
const div = document.querySelector('.block');
const btnRed = document.querySelector('#red');
const btnBlue = document.querySelector('#blue');
btnRed.addEventListener('click', () => {
div.style.backgroundColor = "red";
})
btnBlue.addEventListener('click', () => {
div.style.backgroundColor = "blue";
})
и он работает, но только для первого блока div. Как это исправить? Я новичек во фронтэнде и реально не знаю, что можно сделать. Заранее спасибо!