※ 강의를 듣고 제가 이해한 것을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.

 

1. 카운터 만들기

버튼을 클릭하면 숫자가 올라가거나 내려가는 카운터

 

1) UI 만들기

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2 id="number">0</h2> <!-- 카운터 되는 숫자 화면에 표시 -->
    <div>
        <button id="increase">+1</button> <!-- 숫자를 1 상승 시키는 버튼 생성 -->
        <button id="decrease">-1</button> <!-- 숫자를 1 감소 시키는 버튼 생성 -->
    </div>
    <script src="./section23.js"></script> <!-- 자바스크립트 연동 -->
</body>
</html>

HTML로 위와 같이 코드를 작성해서 UI를 우선 만들어야 한다.

 

실행 결과

 

2) 이벤트 설정하기

// DOM 선택 
const number = document.getElementById('number');
const increase = document.getElementById('increase');
const decrease = document.getElementById('decrease');
 
// DOM 이벤트 설정
increase.onclick = () => {
    const current = parseInt(number.innerText, 10) // parseInt: 문자열을 숫자로 변환해주는 것, 맨 뒤의 숫자는 10진수
    number.innerText = current + 1;
}
 
decrease.onclick = () => {
    const current = parseInt(number.innerText, 10)
    number.innerText = current - 1;

HTML에서 h2 태그와 button 태그에 설정한 id값을 이용해 위와 같이 코드를 입력해 DOM 선택

버튼을 누를 때 숫자가 증가하는 기능과 감소하는 기능을 구현 하기 위해

해당 상수명에 .onclick을 쓴 후 화살표 함수 안에 기능 구현

 

실행 결과

'개발 공부한 내용 정리 > JavaScript' 카테고리의 다른 글

JavaScript- 모달 만들기  (0) 2020.08.23
JavaScript- Promise all 와 Promise race  (0) 2020.08.21
JavaScript- async / await  (0) 2020.08.20
JavaScript- Promise  (0) 2020.08.19
JavaScript- 비동기 처리  (0) 2020.08.18

+ Recent posts

티스토리툴바