###前提・実現したいこと
HTMLとJavascriptを使ってinput='number'に入力された数字を
リアルタイムで足して表示させる
その際変更したらその変更した部分があるID(テーブルのID)のみ計算して表示させたい
Onchange()でできるようにしたい(下記でも書きますが)
###発生している問題・エラーメッセージ
問題:Onchange()で試そうとしたが有用なサンプルがなく、下記のHTMLのように書いたところ、totalの部分で表示したいが{{ total }}ト出てしまう
###該当のソースコード
HTML
1 2#{paginate.list items: table, as: 'i' } 3<td><input id="${i.id}" type="number" class="form-control amount" name="summary.${i.id}.triger" step="0.5" value="${i.trigerPoint}" v-model.number='trigerPoint' style="width:80px;"></td> 4<td><input id="${i.id}" type="number" class="form-control amount" name="summary.${i.id}.business" step="0.25" value="${i.businessPoint}" v-model.number='businessPoint' style="width:80px;"></td> 5<td><input id="${i.id}" type="number" class="form-control amount" name="summary.${i.id}.replace" step="0.5" value="${i.replacePoint}" v-model.number='replacePoint' style="width:80px;"></td> 6#{/paginate.list} 7 8${i.id}=DBの参照しているTableのidごとに表示させています。 9table例 10ID trigerPoint businessPoint replacePoint sumPoint 111 10 10 10 30 122 1 1 1 3 13HTML表示例 14trigerPoint businessPoint replacePoint sumPoint 1510 10 10 30 161 1 1 3 17 18問題として現状はSumPointの一番最初にすべて足されています 19
JavaScript
1//HTML上部に記載しています 2#{set 'moreScripts'} 3<script> 4document.addEventListener('change',function(e){ 5 var t=e.target; 6 if(t.nodeName=="INPUT" && t.type=="number"){ 7 var sum=0; 8 Array.prototype.map.call(document.querySelectorAll('input[type=number]'),function(i){; 9 sum+=(parseFloat(i.value)||0); 10 }); 11 document.querySelector('#ans').innerHTML=sum; 12 } 13}); 14</script> 15#{/set}
###補足情報(言語/FW/ツール等のバージョンなど)
HTML5
JavaScript
Java
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/09/05 00:44
2017/09/05 01:09
2017/09/05 01:36
2017/09/05 01:47
2017/09/05 02:03
2017/09/05 02:10 編集
2017/09/05 02:17
2017/09/05 02:29
2017/09/05 02:39