質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

480閲覧

フォーム内の複数項目の自動計算について

test_87097

総合スコア45

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2020/01/22 04:26

編集2020/01/22 05:19

HTML

1<table class="selectTable" style="width: 97%;"> 2 <tr> 3 <td class="selectTableTitle">数値1</td> 4 <td class="selectTableForm"> 5 <input name="data[Point][0][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" onChange="total() "id="Point0Number"/> 6 </td> 7 </tr> 8 <tr> 9 <td class="selectTableTitle">数値2</td> 10 <td class="selectTableForm"> 11 <input name="data[Point][1][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" onChange="total() id="Point1Number"/> 12 </td> 13 </tr> 14 <tr> 15 <td class="selectTableTitle">数値3</td> 16 <td class="selectTableForm"> 17 <input name="data[Point][2][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" onChange="total() id="Point2Number"/> 18 </td> 19 </tr> 20 <tr> 21 <td class="selectTableTitle">数値4</td> 22 <td class="selectTableForm"> 23 <input name="data[Point][3][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" onChange="total() id="Point3Number"/> 24 </td> 25 </tr> 26 <tr> 27 <td class="selectTableTitle">数値5</td> 28 <td class="selectTableForm"> 29 <input name="data[Point][4][number]" value="" size="5" maxlength="2" style="ime-mode:disabled;" type="number" onChange="total() id="Point4Number"/> 30 </td> 31 </tr> 32 <tr><td class="selectTableTitle">合計</td><td class="selectTableForm"><span id="total"></span></td></tr> 33</table>

JavaScript

1window.onload = function(){ 2 total(); 3} 4function total(){ 5 var price = [$('#Point0Number').val() * 1, $('#Point1Number').val() * 2, $('#Point2Number').val() * 2, $('#Point3Number').val() * 3, $('#Point4Number').val() * 4]; 6 const reducer = (accumulator, currentValue) => accumulator + currentValue; 7 var total = price.reduce(reducer); 8 $('#total').text(total); 9}

行いたい動作は数値1から5に入力された値の合計値を合計のところに表示をさせたいのですが、上手く動作させることが出来ません。
まず数値1から5までのいずれかに入力された時にchangeを動かしたいのですが、それはどのように書けば良いのでしょうか?
また、数値1から5が単純な足し算ではなく、数値1は等倍、数値2は二倍、数値3は三倍…のような計算で合計値を出したい場合はどうすれば良いでしょうか?

追記
jsの方側にchangeを書くことしか頭になかったので、html側それぞれにonChange()を書くのは完全に盲点でした。
上記で一応計算までは動作しているのですが、問題点としてフォームが100個とか増えたときにはどうすれば良いのか、
数値以外が入力された時に何かしら対策が必要にならないか懸念しています。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2020/01/22 04:31

ご自身で試されたコードを質問文に追記し、「何」が「どのように」わからないのか、コードのどの部分で詰まっているのかなどを具体的に追記されたほうが回答が望めると思います。
miyabi_takatsuk

2020/01/22 04:31

ご自身でどこまで書いたかのJavaScriptコードの掲示もお願いします。 質問文は修正できます。
m.ts10806

2020/01/22 04:33

>上手く動作させることが出来ません。 提示されたコードがすべてならHTMLしかないのでうまくもなにも動作しないのは当然かと思います
guest

回答2

0

ベストアンサー

こんな感じで

投稿2020/01/22 06:17

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yambejp

2020/01/22 06:17

$(function(){ $('.selectTable input').on('change',function(){ var total=$('.selectTable input').map(function(x){ return parseInt($(this).val()||"0")*(x+1); }).get().reduce(function(x,y){ return x+y; }); $('#total').text(total); }); });
test_87097

2020/01/22 06:37

ありがとうございます。こうゆうのを作りたかったんです。 非常に助かりました!!
guest

0

changeイベント取りたいなら
inputタグに、onChange="hoge();" でいけますよ。

等倍とか二倍とか…算数ですよ、それぐらい自分で調べましょう。
完全な教えて君はアカン!

投稿2020/01/22 04:37

NEO_PLANETT-777

総合スコア333

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問