Перейти к содержимому
×
Главная
Бизнес-информатика
Web-программирование
Новости
Статьи
☰ Меню
<div id="circle"></div> <label for="radius">Circle radius:</label> <select id="radius"> <option value="50">50px</option> <option value="100">100px</option> <option value="150" selected>150px</option> <option value="200">200px</option> <option value="250">250px</option> </select> <br><br> <label for="color">Circle color:</label> <select id="color"> <option value="black">Black</option> <option value="red">Red</option> <option value="yellow" selected>Yellow</option> <option value="blue">Blue</option> <option value="green">Green</option> </select>
let circle = document.querySelector("#circle"); let radius = document.querySelector("#radius"); let color = document.querySelector("#color"); radius.addEventListener("change", function() { circle.style.width = this.value + "px"; circle.style.height = this.value + "px"; }); color.addEventListener("change", function() { circle.style.backgroundColor = this.value; });
#circle { width: 150px; height: 150px; border-radius: 50%; background-color: yellow; }
Results:
Circle radius:
50px
100px
150px
200px
250px
Circle color:
Black
Red
Yellow
Blue
Green