기본적인 문제는 다음과 같다.
[JavaScript] 원하는 컬러로 배경색 변경하기
나의 로직 1) 컬러를 선택하는 input 요소 => input type = "color" 2) 버튼 클릭시 함수를 호출한다. 2_2) 이 함수내 에서 컬러 변경이 이루어진다. 3) 그 값을 배경색으로 변경한다. => value 이용 모범답안
seongeun-it.tistory.com
이번 문제는 같은 문제를 jQuery로 풀이한 것이다.
나의 로직
버튼요소로 선택된 color의 val값을 area1에 뿌려주겠다.
<h3>문제1. 색상 선택 후 변경 버튼을 클릭하면 색상이 변경되도록 만들어 보시오</h3>
<div id="area1" class="area"></div>
<input id="color" type="color">
<input type="submit" value="제출">
<script>
$(function(){
$(":submit").click(function(){
$("#area1").css("backgroundColor",$("#color").val());
});
});
</script>
innerHTML로 접근해야하는 줄 알고 다음과 같이 기술했다. 하지만 아무런 반응이 없었다.
$("#area1").html($("#color").val());
단순하게 풀어보자!
배경색을 바꾸니까 css메소드로 접근해보았다.
$("#area1").css("backgroundColor",$("#color").val());
성공적으로 변경되었다 !
댓글