JavaScriptでボタンによる出力変更の例
ショーケース
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
で内部の文字列を変更します。