[Javascript] 버튼 클릭시 숫자 증가/감소 시키기

 

브라우저에서 버튼을 클릭했을 때, 

숫자를 증가/감소 시키는 코드입니다.

 

버튼 클릭시 숫자 증가/감소 시키기

<input type='button'
       onclick='count("plus")'
       value='+'/>
<input type='button'
       onclick='count("minus")'
       value='-'/>
<div id='result'>0</div>

function count(type)  {
  // 결과를 표시할 element
  const resultElement = document.getElementById('result');
  
  // 현재 화면에 표시된 값
  let number = resultElement.innerText;
  
  // 더하기/빼기
  if(type === 'plus') {
    number = parseInt(number) + 1;
  }else if(type === 'minus')  {
    number = parseInt(number) - 1;
  }
  
  // 결과 출력
  resultElement.innerText = number;
}

 

 HTML 

onclick='count("plus")'

onclick='count("minus")'

HTML에 더하기, 빼기 버튼을 만들고,

해당 버튼이 클릭되면 count() 함수를 호출하도록 합니다.

이 때, 더하기 버튼은 파라미터로 'plus'를 넘겨주고,

빼기 버튼은 파라미터로 'minus'를 넘겨줍니다.

 

 JAVASCRIPT 

const resultElement = document.getElementById('result');

브라우저에 결과를 출력할 element를 가져옵니다.

 

let number = resultElement.innerText;

현재 화면에 출력되어 있는 값을 가져옵니다.

 

if(type === 'plus') {

   number = parseInt(number) + 1;

}else if(type === 'minus') {

   number = parseInt(number) - 1;

}

더하기 버튼이 클릭되어, 파라미터가 'plus'로 넘어온 경우

현재 화면에 출력된 값에 1을 더하고,

빼기 버튼이 클릭되어, 파라미터가 'minus'로 넘어온 경우

현재 화면에 출력된 값에서 1을 빼줍니다.

이 때 화면에서 읽어온 값은 문자열이므로,

이 값에 숫자 연산을 하기 위해서 parseInt()를 사용하여 문자열을 숫자로 변환하였습니다.

parseInt() 외에도 문자열을 숫자로 변환하는 다른 방법은 아래 링크를 참조하세요.

[Javascript] 문자열 숫자로 변환하기 (1) - parseInt()

[Javascript] 문자열 숫자로 변환하기 (2) - parseFloat()

[Javascript] 문자열 숫자로 변환하기 (3) - +, * 연산자 사용

 

resultElement.innerText = number;

계산한 숫자를 브라우저에 출력합니다.