📂プログラミング

JavaScriptでボタンによる出力変更の例

ショーケース

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で内部の文字列を変更します。