자바스크립트에서 버튼으로 출력이 바뀌는 예제
쇼케이스
0
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
를 통해 내부의 문자열을 변경한다.