Перейти к содержимому
Главная
Направление
Новости
Работы ▾
HTML
JS
PHP
Мои статьи
<p>Circle radius</p> <div> <select id="size-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> </div> <p>Circle color</p> <div> <select id="color-select"> <option value="black">черный</option> <option value="red">красный</option> <option value="yellow">желтый</option> <option value="blue">синий</option> <option value="green">зеленый</option> </select> </div> <div id="circle"></div>
const sizeSelect = document.getElementById("size-select"); const colorSelect = document.getElementById("color-select"); const circle = document.getElementById("circle"); sizeSelect.addEventListener("change", () => { circle.style.width = sizeSelect.value + "px"; circle.style.height = sizeSelect.value + "px"; }); colorSelect.addEventListener("change", () => { circle.style.backgroundColor = colorSelect.value; });
#circle { height: 150px; width: 150px; border-radius: 50%; background-color: yellow; }
Results:
Circle radius
50px
100px
150px
200px
250px
Circle color
черный
красный
желтый
синий
зеленый