버튼 클릭 시 텍스트를 바꾸는 코드다.
<!DOCTYPE html>
//생략
<body>
<p class="title">안녕하세요!</p>
<button class="btn">클릭</button>
<script src="script.js"></script>
</body>
</html>
html문서에는 위에처럼 작성하고
document.querySelector('.btn').addEventListener("click", () => {
document.querySelector('.title').textContent = "Hello!";
})
js 파일에는 위에처럼 작성한다.
여기서 document.querySelector()는 html문서에 있는 class="btn"를 스크립트로 가져올 수 있다.
그래서 addEventListener("click", () => {})로 클릭 이벤트를 넣어주고
document.querySelector()로 다시 html 문서에 class="title"를 불러와서
textContent를 붙여주어 변경할 텍스트 값을 넣는다.
'JavaScript' 카테고리의 다른 글
| [TIL] JavaScript fetch와 async await 사용법 (0) | 2024.06.28 |
|---|---|
| [TIL] 호이스팅(hoisting)이란? (0) | 2024.05.17 |
| [TIL] 내배캠_영화소개페이지(3)_리뷰 수정 기능 구현하기 (0) | 2024.05.10 |
| [TIL] 내배캠_영화소개페이지(1)_localStorage 사용하기 (0) | 2024.05.08 |
| [TIL] 대소문자 구분없이 검색 기능 구현하기 (0) | 2024.04.29 |