Q&A
現在のコードにおける問題点も追記してください
画像のイメージで右上のトータルに合算を出したいのですが
どのような記述で実現可能でしょうか、ご教授願います。
自分で調べたところonclickイベントでparseInt(count_cut) + parseInt．．．と加算の記述をすれば
なるという結論に至ったのですが動かないので質問いたしました。宜しくお願い致します。
またはshowResultでしょうか？
<html lang="ja"> <head> <meta charset="UTF-8" /> <title>test</title> </head> <body> <table> <tr> <td>cu</td> <td>co</td> <td>cc</td> <td>トータル</td> </tr> <tr> <td><div id="count_cu">0</div></td> <td><div id="count_co">0</div></td> <td><div id="count_cc">0</div></td> <td><div id="total">0</div></td> </tr> <tr> <td><input type="button" value="plus" id="up_cu" onclick="hoge()"></td> <td><input type="button" value="plus" id="up_co" onclick="hoge()"></td> <td><input type="button" value="plus" id="up_cc" onclick="hoge()"></td> <td><input type="button" value="X"id="btn_start" onclick="hoge()"></td> </tr> <tr> <td><input type="button" value="minus" id="down_cu" onclick="hoge()"></td> <td><input type="button" value="minus" id="down_co" onclick="hoge()"></td> <td><input type="button" value="minus" id="down_cc" onclick="hoge()"></td> <td><input type="button" value="Y"id="btn_stop" ></td> </tr> </table> </body> <script type="text/javaScript"> // ページが読み込まれたら実行 window.onload = function() { // オブジェクトと変数の準備 var count_cu = document.getElementById("count_cu"); var up_cu = document.getElementById("up_cu"); var down_cu = document.getElementById("down_cu"); var count_cut = 0; var count_co = document.getElementById("count_co"); var up_co = document.getElementById("up_co"); var down_co = document.getElementById("down_co"); var count_color = 0; var count_cc = document.getElementById("count_cc"); var up_cc = document.getElementById("up_cc"); var down_cc = document.getElementById("down_cc"); var count_colorCut = 0; // こう？ var count_total = document.getElementById("total"); // cuのカウントアップボタンクリック処理 up_cu.onclick = function() { count_cut += 1; count_cu.innerHTML = count_cut; }; // cuのカウントダウンボタンのクリック処理 down_cu.onclick = function() { count_cut -= 1; count_cu.innerHTML = count_cut; } // coのカウントアップボタンクリック処理 up_co.onclick = function() { count_color += 1; count_co.innerHTML = count_color; }; // coのカウントダウンボタンのクリック処理 down_co.onclick = function() { count_color -= 1; count_co.innerHTML = count_color; } // cc のカウントアップボタンクリック処理 up_cc.onclick = function() { count_colorCut += 1; count_cc.innerHTML = count_colorCut; }; // cc のカウントダウンボタンのクリック処理 down_cc.onclick = function() { count_colorCut -= 1; count_cc.innerHTML = count_colorCut; } var showResult = function() { var num1 = Number($('#count_cut').val());// var num2 = Number($('#count_color').val());// var num3 = Number($('#count_colorCut').val());// var ans = num1 + num2 + num3; $("#total").html(ans); } }; </script> </html> コード
自分で調べたところonclickイベントでparseInt(count_cut) + parseInt．．．と加算の記述をすれば
なるという結論に至ったのですが動かないので質問いたしました。宜しくお願い致します。
xとyを押した場合の具体的な希望する挙動は？
それぞれ文字列でX、Yと表示させたいです。合算した数字はSQLに保存しておきたいです。
(質問本文に)追記してください
>動かない
何が起きてるのが具体的に記載してください。
「想定通りに」動かないのか
「エラーで」動かないのか
はたまた別のことが起きているのか
具体的に書かれないことには他者には何も伝わりません
回答1件
0
ベストアンサー
ちょっと雑ですがmoを利用して
javascript
1<script> 2const observer1 = new MutationObserver((mutations) => { 3 mutations.forEach((mutation) => { 4 var t=mutation.target; 5 t.closest('tr').querySelector('.total').textContent=Array.from(t.closest('tr').querySelectorAll('.count')).map(x=>parseInt(x.textContent)).reduce((x,y)=>x+y); 6 }); 7}); 8const observer2 = new MutationObserver((mutations) => { 9 mutations.forEach((mutation) => { 10 var t=mutation.target; 11 var cate=(t.classList.contains('a')?"a":"")+ 12 (t.classList.contains('b')?"b":"")+ 13 (t.classList.contains('c')?"c":""); 14 document.querySelector('.result.'+cate).textContent=t.textContent; 15 }); 16}); 17const config = {childList: true}; 18 19window.addEventListener('DOMContentLoaded', ()=>{ 20 document.querySelectorAll('.count').forEach(x=>observer1.observe(x, config)); 21 document.querySelectorAll('.total').forEach(x=>observer2.observe(x, config)); 22 document.querySelectorAll('.up,.down').forEach(x=>{ 23 x.addEventListener('click',e=>{ 24 var t=e.target; 25 var col=(t.classList.contains('cu')?"cu":"")+ 26 (t.classList.contains('co')?"co":"")+ 27 (t.classList.contains('cc')?"cc":""); 28 if(col){ 29 var pm=t.classList.contains('up')?1:-1; 30 var target_col=t.closest('table').querySelector('.count.'+col); 31 target_col.textContent=parseInt(target_col.textContent)+pm; 32 } 33 }); 34 }); 35 document.querySelectorAll('.start,.stop').forEach(x=>{ 36 x.addEventListener('click',e=>{ 37 var t=e.target; 38 var cate=(t.classList.contains('a')?"a":"")+ 39 (t.classList.contains('b')?"b":"")+ 40 (t.classList.contains('c')?"c":""); 41 var xy=t.classList.contains('x')?"X":"Y"; 42 document.querySelector('.result.'+cate).textContent=xy; 43 }); 44 }); 45}); 46</script> 47<h3>A</h3> 48<table> 49<tr> 50 <td>cu</td> 51 <td>co</td> 52 <td>cc</td> 53 <td>トータル</td> 54 </tr> 55 <tr> 56 <td><div class="count cu">0</div></td> 57 <td><div class="count co">0</div></td> 58 <td><div class="count cc">0</div></td> 59 <td><div class="total a">0</div></td> 60 </tr> 61 <tr> 62 <td><input type="button" value="plus" class="up cu"></td> 63 <td><input type="button" value="plus" class="up co"></td> 64 <td><input type="button" value="plus" class="up cc"></td> 65 <td><input type="button" value="X" class="start a" ></td> 66 </tr> 67 <tr> 68 <td><input type="button" value="minus" class="down cu"></td> 69 <td><input type="button" value="minus" class="down co"></td> 70 <td><input type="button" value="minus" class="down cc"></td> 71 <td><input type="button" value="Y" class="stop a" ></td> 72 </tr> 73</table> 74<h3>B</h3> 75<table> 76<tr> 77 <td>cu</td> 78 <td>co</td> 79 <td>cc</td> 80 <td>トータル</td> 81 </tr> 82 <tr> 83 <td><div class="count cu">0</div></td> 84 <td><div class="count co">0</div></td> 85 <td><div class="count cc">0</div></td> 86 <td><div class="total b">0</div></td> 87 </tr> 88 <tr> 89 <td><input type="button" value="plus" class="up cu"></td> 90 <td><input type="button" value="plus" class="up co"></td> 91 <td><input type="button" value="plus" class="up cc"></td> 92 <td><input type="button" value="X" class="start b" ></td> 93 </tr> 94 <tr> 95 <td><input type="button" value="minus" class="down cu"></td> 96 <td><input type="button" value="minus" class="down co"></td> 97 <td><input type="button" value="minus" class="down cc"></td> 98 <td><input type="button" value="Y" class="stop b" ></td> 99 </tr> 100</table> 101<h3>C</h3> 102<table> 103<tr> 104 <td>cu</td> 105 <td>co</td> 106 <td>cc</td> 107 <td>トータル</td> 108 </tr> 109 <tr> 110 <td><div class="count cu">0</div></td> 111 <td><div class="count co">0</div></td> 112 <td><div class="count cc">0</div></td> 113 <td><div class="total c">0</div></td> 114 </tr> 115 <tr> 116 <td><input type="button" value="plus" class="up cu"></td> 117 <td><input type="button" value="plus" class="up co"></td> 118 <td><input type="button" value="plus" class="up cc"></td> 119 <td><input type="button" value="X" class="start c" ></td> 120 </tr> 121 <tr> 122 <td><input type="button" value="minus" class="down_cu"></td> 123 <td><input type="button" value="minus" class="down_co"></td> 124 <td><input type="button" value="minus" class="down_cc"></td> 125 <td><input type="button" value="Y" class="stop c" ></td> 126 </tr> 127</table> 128<h3>結果</h3> 129<table> 130<tr> 131 <td>A</td> 132 <td class="result a"></td> 133 </tr> 134<tr> 135 <td>B</td> 136 <td class="result b"></td> 137 </tr> 138<tr> 139 <td>C</td> 140 <td class="result c"></td> 141 </tr> 142</table>
投稿2019/11/25 07:45
総合スコア116694
とても参考になりました。ありがとうございました。
あなたの回答
tips
プレビュー
