728x90
반응형
See the Pen Untitled by namminimi (@namminimi) on CodePen.
change 이벤트 사용 하여 10을 선택했을 때 div에 "가"가 출력되고 20은 "나"출력!!!!!
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
<!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>
</head>
<body>
<select name="num" id="num">
<option value="가">10</option>
<option value="나">20</option>
<option value="다">30</option>
<option value="라">40</option>
</select>
<script>
document.querySelector("#num").addEventListener("change", function(){
//change 이벤트사용 document.querySelector("div").innerHTML = this.value;
//값이 바뀔때마다 #num value값 div에 출력 })
</script>
</body>
</html>
|
cs |
※사용한 코드
document.querySelector()
2022.12.03 - [javascript/DOM] - 자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력
change 이벤트
this
.innerHTML
2022.12.03 - [javascript/DOM] - HTML 내용, 속성, 스타일 변경하기
function(){}
728x90
반응형
'javascript > javascript HTML DOM' 카테고리의 다른 글
| [javascript]HTML 내용, 속성, 스타일 변경하기 (0) | 2022.12.03 |
|---|---|
| [javascript]html컬랙션 과 노드리스트 차이 & 배열과 유사배열의 차이 (0) | 2022.12.03 |
| [javascript]자바스크립트를 이용해서 DOM Element(요소) 찾기 및 콘솔 출력 (0) | 2022.12.03 |
| 불 끄고 켜기 실습 (0) | 2022.12.01 |
| [javascript]요소 노드 생성 및 요소 노드 자식 추가 (0) | 2022.11.29 |
댓글