JavaScript 실습문제 2. 버튼을 클릭해 색상 변경하기

1. 바뀐 색상이 들어갈 div요소와 색상선택할 input요소,  버튼 생성하기 

<style>
   .area{width: 100px; height: 100px; background: black;}
</style>

<div id="color" class="area"></div>
<input type="color" id="selectColor">
<button onclick="colorChange();">변경</button>

 

2. 색상선택 후 div의 backgroundColor 변경되도록 함수 작성

 <script>
         function colorChange(){
            const color1 = document.getElementById("selectColor");
            let color2 = color1.value;
            const divEl =  document.getElementById("color");
        
            divEl.style.background= color2;
        }
</script>

>>위의 코드를 아래와 같이 한줄로 변경할 수 있음 

<script>
document.getElementById("color").style.backgroundColor = document.getElementById("selectColor").value;
</script>