반응형
✅ 오늘의 문제 풀이 인증
📣 과제에 대한 답안 코드는 <소스코드>를 이용해 작성해주세요. (캡쳐만 있을 경우 코드리뷰 불가)
📣 문제를 푼 과정에서 생겼던 오류, 알게된 점이 있다면 함께 정리해주세요 😁
Day2.html
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
</head>
<body>
<style>
.btn{
display: inline-block;
width: 40px;
height: 40px;
background-color: lightgray;
border: 1px solid black;
cursor: pointer;
text-align: center;
line-height: 40px;
}
</style>
<h2>모</h2>
<h2>각</h2>
<h2>코</h2>
<div class="btn" onclick="changeText(1)">모</div>
<div class="btn" onclick="changeText(2)">각</div>
<div class="btn" onclick="changeText(3)">코</div>
<script src="./index.js"></script>
</body>
</html>
index.js
function changeText(i){
var h2 = document.getElementsByTagName('h2')
if (i == 1) {
h2[0].innerHTML = "모처럼이니"
} else if (i == 2) {
h2[1].innerHTML = "각잡고 열심히 하면"
} else {
h2[2].innerHTML = "코린이 탈출이다."
}
}
버튼을 클릭할때 onclick이라는 속성을 통해 javascript의 함수를 호출할 수 있다는 것을 알게되었습니다.
또 사실 처음에는 getElementsByTagName()으로 객체를 가져오면 배열에 저장되는 사실을 모르고 각각의 h2 태그에 id를 붙여 코드를 짰습니다.
그런데 다른 분들의 코드를 본 뒤, getElementsByTagName()으로 객체를 가져오면 각각의 객체값이 순서대로 배열에 저장됨을 알게되었고 코드를 수정하여 h2의 인덱스 0,1,2에 각각 접근하는 방식으로 바꾸었습니다.
✅ 오늘의 한마디
👉 점점 더 재밌어지고 있습니다! 자바스크립트를 통해 html의 객체를 가져오고 이를 활용하는 것이 무척 재밌습니다. 더 빨리 배우고 싶습니다!!
반응형
'Front-End > JavaScript' 카테고리의 다른 글
| [코뮤니티] 6일차 - 한 입 웹개발(JS) (0) | 2021.05.06 |
|---|---|
| [코뮤니티] 5일차 - 한 입 웹개발(JS) (0) | 2021.05.04 |
| [코뮤니티] 4일차 - 한 입 웹개발(JS) (0) | 2021.05.03 |
| [코뮤니티] 2일차 - 한 입 웹개발(JS) (0) | 2021.04.29 |
| [코뮤니티] 1일차 - 한 입 웹개발(JS) (0) | 2021.04.29 |