【JavaScript】inputに入力された数値の計算結果を表示する

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptでinputに入力された数値の計算結果を表示する方法をご紹介しています。

上記の疑問にお答えします。

では、解説していきます。

入力された数値の計算結果を表示する

inputに入力された2つの数値の加算結果を表示します。加算結果を表示するinputにはreadonly属性を設定しています。Numberで値を数値に変換しているため、数値以外が入力された場合はNaN（Not-A-Number）となります。

HTML

<div id="app">
    <input type="text" name="input1" value="">
    <span>+<span>
    <input type="text" name="input2" value="">
    <span>=<span>
    <input type="text" name="result" value="0" readonly>
</div>

JavaScript

const input1 = document.querySelector("input[name=input1]");
const input2 = document.querySelector("input[name=input2]");
const result = document.querySelector("input[name=result]");
const calc = ()=>{
    result.value = Number(input1.value) + Number(input2.value);
}

input1.addEventListener("keyup", calc, false);
input2.addEventListener("keyup", calc, false);

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

これで入力された数値の計算結果を表示することができるようになりました。入力項目数や演算子は環境にあわせて変更していただければと思います。

イベントハンドラで入力された数値の計算結果を表示する

イベントハンドラの方が扱いやすい方もいると思いますので、イベントハンドラを使ったサンプルもご紹介します。計算方法は前項と同様です。inputに入力された2つの数値の加算結果を表示します。

HTML

<div id="app">
    <input type="text" name="input1" value="" onKeyup="calc()">
    <span>+<span>
    <input type="text" name="input2" value="" onKeyup="calc()">
    <span>=<span>
    <input type="text" name="result" value="0" readonly>
</div>

JavaScript

const calc = ()=>{
    const input1 = document.querySelector("input[name=input1]");
    const input2 = document.querySelector("input[name=input2]");
    const result = document.querySelector("input[name=result]");
    
    result.value = Number(input1.value) + Number(input2.value);
}

実行結果

See the Pen Untitled by ryohei (@intotheprogram) on CodePen.

以上がイベントハンドラを使った実装方法となります。

最後に

本記事の内容はJavaScriptの勉強を始めて最初の頃に触ったような記憶があります。入力した内容がリアルタイムに画面に反映されるさまに、当時感動したものです。本記事でご紹介した内容はかなりシンプルなのでカスタマイズが必要ですが、本記事の応用すればサイト上で概算を表示するシミュレーションページなんかも構築することができます。シミュレーションページは結構ニーズが高いので、作り方を覚えておくと提案の際に役に立つかもしれないですね！

以上、JavaScriptでinputに入力された数値の計算結果を表示する方法のご紹介でした！