<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;
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.