📂프로그래밍

자바스크립트에서 버튼으로 출력이 바뀌는 예제

쇼케이스

0으로 시작하는 수가 + 버튼을 누르면 숫자가 1씩 증가하고, - 버튼을 누르면 숫자가 1씩 감소하는 예제다.

코드

html

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

• <div id='result'>0</div>에 초기화된 수를 보여준다.
• 버튼에 따라 onclick='count()의 인수를 다르게 주어 어떤 동작이 실행될지 결정한다.

javascript

<script>
    const resultElement = document.getElementById('result');
    let counter = resultElement.innerText;
    
    function count(type) {
        if(type === '+') {
            counter = parseInt(counter) + 1;
        } else if(type === '-') {
            counter = parseInt(counter) - 1;
        }
        resultElement.innerText = counter;
    }
</script>

• document.getElementById('result')를 통해 <div id='result'>0</div>에서 id='result'를 읽고 DOM 객체로써 둔다.
• let counter = resultElement.innerText를 통해 내부의 문자열을 읽는다.
• parseInt(counter)을 통해 문자열인 수를 정수로 파싱한다.
• resultElement.innerText = counter를 통해 내부의 문자열을 변경한다.