카운터 만들기

jini.choi·2022년 5월 17일
0

HTML과 JS연동

목록 보기
1/2
  • +1, -1 버튼 누를 시 숫자 업다운
  • DOM : 각 캐그에 대한 정보를 지니고 있는 JS객체

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

profile
개발짜🏃‍♀️

0개의 댓글