HTML
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<h2 id="number">0</h2>
<div>
<button id="increase">+1</button>
<button id="decrease">-1</button>
</div>
<script src="src/index.js"></script>
</body>
</html>
JS
const number = document.getElementById("number");
const buttons = document.querySelectorAll("button");
console.log(buttons);
increase.onclick = () => {
const current = parseInt(number.innerText, 10); //문자열을(숫자로 변환, 몇진수로)
number.innerText = current + 1;
};
decrease.onclick = () => {
const current = parseInt(number.innerText, 10); //문자열을(숫자로 변환, 몇진수로)
number.innerText = current - 1;
};
결과
이 글은 패스트캠퍼스 '프론트엔드(React)올인원패키지Online'을 수강하며 정리한 노트입니다.
https://fastcampus.co.kr/search?keyword=%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C