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

こんにちは、ryohei(@ityryohei)です!

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

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に入力された数値の計算結果を表示する方法のご紹介でした!

JavaScriptを基礎からしっかりと学びたい方へ

下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。

おすすめの書籍

Adobe Creative Cloudを通常価格で購入していませんか?

Adobe Creative Cloud(Adobe CC)はAdobe社が提供するクリエイター向けのサービスです。WEB制作の幅を広げる「Photoshop・Illustrator・XD」Youtuberや動画クリエイターの編集作業に欠かせない「Premiere Pro・After Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。

コンプリートプランはAdobe CCの全20以上のアプリが使用できるプランです。多くのアプリが使用できるため定価で購入すると年間7万円以上するプランですが、デジタルハリウッドのAdobeマスター講座では「基礎動画教材+Adobe CC コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。定価より安価にAdobe Creative Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。

Adobeマスター講座はこちら