<html>
<head>
</head>
<body>
<h2 id="title">클릭 이벤트를 붙여보자</h2>
<article id="mission">
<p>JS를 이용해서 숫자증가버튼을 클릭했을때 span의 숫자가 1씩 올라가게 해주세요.</p>
</article>
<div id="container">
<button id="plus">숫자증가</button>
<button id="minus">숫자감소</button>
<button id="reset">초기화</button>
<span>0</span>
</div>
</body>
</html>
let container = document.querySelector('#container');
const plusBtn = container.querySelector('#plus');
const minusBtn = container.querySelector('#minus');
const number = container.querySelector('span');
const reset = container.querySelector('#reset');
plusBtn.addEventListener('click',function(){
let count = Number(number.textContent)
count = count + 1;
number.textContent = count;
});
minusBtn.addEventListener('click',function(){
let count = Number(number.textContent)
count = count - 1;
number.textContent = count;
});
reset.addEventListener('click',function(){
let count = Number(number.textContent)
count = 0;
number.textContent = count;
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.