Javascript
Javascript - 카운터 어플리케이션 예제
Starters
2020. 9. 6. 17:36
HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Counter App</title>
</head>
<body>
<h2 id="number" style="color:#f020f1;">0</h2>
<div>
<button id="increase">+1</button>
<button id="decrease">-1</button>
</div>
<script src="html과 연동.js"></script>
</body>
</html>JS
const number = document.getElementById('number');
const increase = document.getElementById('increase');
const decrease = document.getElementById('decrease');
console.log(number.innerText);
console.log(increase.offsetTop); // top 위치 알수 있음
console.log(decrease.id);
increase.onclick = () => {
// parseInt 정수형으로 변환, 뒤에 파라미터는 몇 진수로 할 것인지
const current = parseInt(number.innerText, 10);
number.innerText = current + 1;
}
decrease.onclick = () => {
const current = parseInt(number.innerText, 10);
number.innerText = current - 1;
}
아이디가 없을 때, 태그이름으로 불러올 때
const number = document.getElementById('number');
const buttons = document.querySelectorAll('button');
const [increase, decrease] = buttons;
console.log(buttons);