나의 로직
1) 컬러를 선택하는 input 요소 => input type = "color"
2) 버튼 클릭시 함수를 호출한다.
2_2) 이 함수내 에서 컬러 변경이 이루어진다.
3) 그 값을 배경색으로 변경한다. => value 이용
모범답안
방법 1) ID로 요소 객체를 가져와서 그 값을 대입하기
<script>
function colorChange(){
var area1 = document.getElementById("area1");
var color = document.getElementById("color");
area1.style.backgroundColor = color.value;
};
</script>
방법 2) 한 코드로 기술하기
<script>
function colorChange(){
document.getElementById("area1").style.backgroundColor = document.getElementById("color").value;
};
</script>
셀프 피드백
- 잘했어요 !
- 기본적인 로직에 접근했다. (input type ="color", onclick = "colorChange();",value등)
- 논리적으로 생각한 뒤에 코드를 기술했다.
- 접근해야하는 요소 객체가 2개 이상이라는 것을 파악했다.
- 아쉬운 점!
- 변수명을 혼란스럽게 기술했다. 길더라도 명확한 변수명을 제시하자.
- value 속성을 사용해야하는 건 알았는데, 정확하게 어디에 어떻게 사용해야하는지 몰랐다.
전체 코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.area{border: 1px;
background-color: black;
width:100px;
height:100px}
</style>
</head>
<body>
<h3>문제1. 색상 선택 후 변경 버튼을 클릭하면 색상이 변경되도록 만들어 보시오</h3>
<div id="area1" class="area"></div>
<input id="color" type="color">
<button onclick="colorChange();">변경</button>
<script>
function colorChange(){
document.getElementById("area1").style.backgroundColor = document.getElementById("color").value;
};
</script>
같은 문제를 jQuery로 푸는 방법 !
[jQuery] 사용자에게 입력받은 색상값을 출력하기
기본적인 문제는 다음과 같다. input type = "color" 2) 버튼 클릭시 함수를 호출한다. 2_2) 이 함수내 에서 컬러 변경이 이루어진다. 3) 그 값을 배경색으로 변경한다. => value 이용 모범답안 " data-og-host="s
seongeun-it.tistory.com
'🚨 Error > JavaScript' 카테고리의 다른 글
| [JavaScript] 배열 | 제시되어 있는 값인(ex. 고양이)를 입력해도 "존재하지 않습니다."라는 문구가 출력된다. (0) | 2021.04.17 |
|---|---|
| [JavaScript] 간이 계산기 만들기 (0) | 2021.04.16 |
| [JavaScript] 이가 없으면 잇몸으로 | split 구분자를 이용해서 배열을 생성하고 출력하기 (0) | 2021.04.16 |
| [JavaScript] 어..? 이게 되네..? (0) | 2021.04.16 |
| [JavaScript] HTML 태그에 다양한 방법으로 접근 테스트 하기 ( 태그명, 아이디, 네임 ) (0) | 2021.04.15 |
댓글