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個とか増えたときにはどうすれば良いのか、
数値以外が入力された時に何かしら対策が必要にならないか懸念しています。
回答2件
あなたの回答
tips
プレビュー