<div class="circle"></div> <fieldset> <label for="radius">Circle radius</label> <select name="radius" id="radius"> <option value="50">50px</option> <option value="100">100px</option> <option value="150" selected="selected">150px</option> <option value="200">200px</option> <option value="250">250px</option> </select> <label for="color">Circle color</label> <select name="color" id="color"> <option value="black">Black</option> <option value="red">Red</option> <option value="yellow" selected="selected">Yellow</option> <option value="blue">Blue</option> <option value="green">Green</option> </select> </fieldset>
const circle = document.querySelector('.circle'); const radiusSelect = document.getElementById('radius'); const colorSelect = document.getElementById('color'); radiusSelect.addEventListener('change', () => { circle.style.width = radiusSelect.value + 'px'; circle.style.height = radiusSelect.value + 'px'; }); colorSelect.addEventListener('change', () => { circle.style.backgroundColor = colorSelect.value; });
.circle { background: #456BD9; border-radius: 50%; height: 5em; width: 5em;
Results:
Circle radius
50px
100px
150px
200px
250px
Circle color
Black
Red
Yellow
Blue
Green