Перейти к содержимому
Главная
Направление
Учебные задания
Новости
<div class="circle" id="circle"></div> <label for="radius-select">Cricle radius:</label> <select id="radius-select"> <option value="50">50px</option> <option value="100">100px</option> <option value="150">150px</option> <option value="200">200px</option> <option value="250">250px</option> </select> <br> <label for="color-select">Circle color:</label> <select id="color-select"> <option value="black">Black</option> <option value="red">Red</option> <option value="yellow">Yellow</option> <option value="blue">Blue</option> <option value="green">Green</option> </select>
// Получаем элементы DOM const circle = document.getElementById("circle"); const radiusSelect = document.getElementById("radius-select"); const colorSelect = document.getElementById("color-select"); // Функция для обновления свойств круга function updateCircle() { const selectedRadius = radiusSelect.value; const selectedColor = colorSelect.value; circle.style.width = `${selectedRadius}px`; circle.style.height = `${selectedRadius}px`; circle.style.backgroundColor = selectedColor; } // Вызываем функцию для установки начальных свойств updateCircle(); // Слушаем изменения в селекторах и обновляем круг при изменении radiusSelect.addEventListener("change", updateCircle); colorSelect.addEventListener("change", updateCircle);
.circle { width: 100px; height: 100px; border-radius: 50%; background-color: black;
Results:
Cricle radius:
50px
100px
150px
200px
250px
Circle color:
Black
Red
Yellow
Blue
Green