HOMEJavaScript【JavaScript】inputに入力された数値の計算結果を表示する【JavaScript】inputに入力された数値の計算結果を表示する2022.08.30JavaScriptBこんにちは、ryohei(@ityryohei)です!本記事では、JavaScriptでinputに入力された数値の計算結果を表示する方法をご紹介しています。JavaScriptでinputに入力された数値を計算して、結果を自動で表示するにはどうすればいいんだろう?上記の疑問にお答えします。入力された数値の計算結果を表示するinputに入力された2つの数値の加算結果を表示します。加算結果を表示するinputにはreadonly属性を設定しています。Numberで値を数値に変換しているため、数値以外が入力された場合はNaN(Not-A-Number)となります。CodePen.これで入力された数値の計算結果を表示することができるようになりました。入力項目数や演算子は環境にあわせて変更していただければと思います。イベントハンドラで入力された数値の計算結果を表示するイベントハンドラの方が扱いやすい方もいると思いますので、イベントハンドラを使ったサンプルもご紹介します。計算方法は前項と同様です。inputに入力された2つの数値の加算結果を表示します。CodePen.以上がイベントハンドラを使った実装方法となります。最後に本記事の内容はJavaScriptの勉強を始めて最初の頃に触ったような記憶があります。入力した内容がリアルタイムに画面に反映されるさまに、当時感動したものです。本記事でご紹介した内容はかなりシンプルなのでカスタマイズが必要ですが、本記事の応用すればサイト上で概算を表示するシミュレーションページなんかも構築することができます。シミュレーションページは結構ニーズが高いので、作り方を覚えておくと提案の際に役に立つかもしれないですね!以上、JavaScriptでinputに入力された数値の計算結果を表示する方法のご紹介でした!JavaScriptを基礎からしっかりと学びたい方へ下記の参考書がおすすめです。私がJavaScript入門時に購入した書籍で、基礎から応用まで多様なサンプルを用いて解説されています。ページ数は多いですが、内容が伴っているのですらすら読めます。腰を据えて学びたい方に最良の一冊となっています。CC)はAdobe社が提供するクリエイター向けのサービスです。Effects」など全20以上のアプリが提供されており、幅広いプランが用意されています。CCの全20以上のアプリが使用できるプランです。コンプリートプラン(12ヵ月)」がセットになって39,980円(税込)で利用できます。Cloudのライセンスを購入でき、以降のライセンス更新も可能。動画教材で基礎スキルを習得できるので、入門する方にも便利な講座です。詳しくは下記のリンクからチェックしてみてくださいね。Webエンジニア福岡のWeb制作会社でエンジニアをしています。記事に関するご質問やご相談等ございましたら気軽にお問い合わせください。サービス・ツールSPEEC登録不要、無料で使えるビジネス書類作成サービスです。見積書~領収書までのPDFを一括で作成することができます。犬のごはん楽天市場で販売中の犬のごはんを好みの条件で簡単に絞り込むことができるドッグフード検索サイトです。HASHWordPressのログイン用にハッシュ化したパスワードを生成するツールです。DBからパスワードを変更する場合にご利用ください。Programご訪問いただきありがとうございます!本サイトを運営しているryoheiと申します。福岡のWeb制作会社でエンジニアをしています。本サイトは私が業務中に得た知識をアウトプットする場として2015年から運営しています。into-the-program.com。