Q&A
「index」とありますが、「input」の間違いではないでしょうか。
###実現したいこと
今のコードだと長くなってしまいそうなので、javascriptでループさせて短くできないか、考えているのですが、なかなかできません。どうすればループをさせる形で表現できるでしょうか？
やりたいことは以下になります。
・テーブルをどんどん下のほうに追加したい
・チェックボックスのON/OFFでselectとinputを変えたい
・selectとinputで選択した値を足し算したい
Webコンテンツやり始めて2週間目。とんでもない初心者ですが、生暖かい目で指摘していただけると幸いです。
###該当のソースコード
html
1<table class="table table-striped"> 2 <thead> 3 <tr> 4 <th>項目１</th> 5 <th class="col-md-1">自由入力<BR>(ON/OFF)</th> 6 <th>金額</th> 7 </tr> 8 </thead> 9 <tbody> 10 <tr> 11 <td>商品１</td> 12 <td> 13 <div style="display:inline-flex"> 14 <form name="ckeckkakunin1" action=""> 15 <input type="checkbox" id="chk1" name="chk1" onclick="chkdisp(this,'ans1','ans2')" onChange="keisan()"/> 16 </form> 17 </div> 18 </td> 19 <td> 20 <form class="form-inline" id="ans2" name="selectkakunin1"> 21 <div class="form-group"> 22 <div class="input-group"> 23 <div class="input-group-addon">¥</div> 24 <select class="form-control" id="usage1select2" name="selecttest1" onChange="keisan()"> 25 <option selected disabled class="text-hide">100</option><option>0</option><option>50</option><option>100</option><option>500</option><option>1000</option><option>10000</option> 26 </select> 27 </div> 28 </div> 29 </form> 30 <form class="form-inline" id="ans1" style="display:none;" name="freekakunin1"> 31 <div class="form-group"> 32 <div class="input-group"> 33 <span class="input-group-addon">¥</span> 34 <input type="text" class="form-control" placeholder="200" onChange="keisan()" name="free1" /> 35 </div> 36 </div> 37 </form> 38 39 </td> 40 </tr> 41 <tr> 42 <td>商品２</td> 43 <td> 44 <div style="display:inline-flex"> 45 <form name="ckeckkakunin2" action=""> 46 <input type="checkbox" id="chk2" name="chk2" onclick="chkdisp(this,'ans3','ans4')" onChange="keisan()"/> 47 </form> 48 </div> 49 </td> 50 <td> 51 <form class="form-inline" id="ans4" name="selectkakunin2"> 52 <div class="form-group"> 53 <div class="input-group"> 54 <div class="input-group-addon">¥</div> 55 <select class="form-control" id="usage1select2" name="selecttest2" onChange="keisan()"> 56 <option selected disabled class="text-hide">100</option><option>0</option><option>50</option><option>100</option><option>500</option><option>1000</option><option>10000</option> 57 </select> 58 </div> 59 </div> 60 </form> 61 <form class="form-inline" id="ans3" style="display:none;" name="freekakunin2"> 62 <div class="form-group"> 63 <div class="input-group"> 64 <span class="input-group-addon">¥</span> 65 <input type="text" class="form-control" placeholder="200" onChange="keisan()" name="free2" > 66 </div> 67 </div> 68 </form> 69 70 </td> 71 </tr> 72 <tr> 73 <td>商品３</td> 74 <td> 75 <div style="display:inline-flex"> 76 <form name="ckeckkakunin3" action=""> 77 <input type="checkbox" id="chk3" name="chk3" onclick="chkdisp(this,'ans5','ans6')" onChange="keisan()"/> 78 </form> 79 </div> 80 </td> 81 <td> 82 <form class="form-inline" id="ans6" name="selectkakunin3"> 83 <div class="form-group"> 84 <div class="input-group"> 85 <div class="input-group-addon">¥</div> 86 <select class="form-control" id="usage1select2" name="selecttest3" onChange="keisan()"> 87 <option selected disabled class="text-hide">100</option><option>0</option><option>50</option><option>100</option><option>500</option><option>1000</option><option>10000</option> 88 </select> 89 </div> 90 </div> 91 </form> 92 <form class="form-inline" id="ans5" style="display:none;" name="freekakunin3"> 93 <div class="form-group"> 94 <div class="input-group"> 95 <span class="input-group-addon">¥</span> 96 <input type="text" class="form-control" placeholder="200" onChange="keisan()" name="free3" > 97 </div> 98 </div> 99 </form> 100 </td> 101 </tr> 102 </tbody> 103</table> 104<form action="#" name="form1"> 105 <tr> 106 <td align="right"><strong>合計</strong></td> 107 <td><input type="text" name="field_total" size="8" value="0"> 円</td> 108 </tr> 109</form>
javascript
1<script type="text/javascript"> 2 3function keisan(){ 4 check1 = document.ckeckkakunin1.chk1.checked; 5 check2 = document.ckeckkakunin2.chk2.checked; 6 check3 = document.ckeckkakunin3.chk3.checked; 7 var price1 = document.selectkakunin1.selecttest1.value; 8 var price2 = document.selectkakunin2.selecttest2.value; 9 var price3 = document.selectkakunin3.selecttest3.value; 10 11 if (check1 == true) { 12 price1 = document.freekakunin1.free1.value; 13 if (price1 == ""){ 14 price1 = 0; 15 }else{ 16 17 } 18 }else{ 19 price1 = document.selectkakunin1.selecttest1.value; 20 if (price1 == ""){ 21 price1 = 100; 22 }else{ 23 24 } 25 } 26 27 if (check2 == true) { 28 price2 = document.freekakunin2.free2.value; 29 if (price2 == ""){ 30 price2 = 0; 31 }else{ 32 33 } 34 }else{ 35 price2 = document.selectkakunin2.selecttest2.value; 36 if (price2 == ""){ 37 price2 = 100; 38 }else{ 39 40 } 41 } 42 43 if (check3 == true) { 44 price3 = document.freekakunin3.free3.value; 45 if (price3 == ""){ 46 price3 = 0; 47 }else{ 48 49 } 50 }else{ 51 price3 = document.selectkakunin3.selecttest3.value; 52 if (price3 == ""){ 53 price3 = 100; 54 }else{ 55 56 } 57 } 58 59 // 合計を計算 60 var total = parseInt(price1) + parseInt(price2) + parseInt(price3); 61 document.form1.field_total.value = total; // 合計を表示 62 } 63 64 window.onload=keisan(); 65</script> 66 67<script type="text/javascript"> 68function chkdisp( obj,id1,id2 ) { 69 if( obj.checked ){ 70 document.getElementById(id1).style.display = "block"; 71 document.getElementById(id2).style.display = "none"; 72 } 73 else { 74 document.getElementById(id1).style.display = "none"; 75 document.getElementById(id2).style.display = "block"; 76 } 77} 78</script>
###考察
<form name="ckeckkakunin?" action="">などを<table>の外側に移動して、for文を使うんだろうと思うもののうまくいかず悩んでいます。 宜しくお願いし致します。
回答2件
0
ベストアンサー
HTML/CSS/js全て書き直してみました。こういうことをしたいのでしょうか。
変わった書き方（？）で、コメントを付けない不親切なコードですが、こういう書き方も出来るということで。
動くサンプル：https://jsfiddle.net/wx9ba193/3/
少し気になった部分を列挙します。
- option要素に selected と disabled を設定されていますが、「選択（selected）しているのに選択できない（disabled）要素」は変ではないでしょうか。
- check1からcheck3までの変数がvarで宣言されていないのは付け忘れでしょうか。
- tr要素の親要素にform要素を使っている箇所がありますが、HTMLの文法的に間違っています。
また、別ページへのPOST/GET通信を個別に行う必要が無ければinput/select要素をform要素で個別に囲う必要はありません。ページ内での計算のみであればform要素は無くてもよいです。
0. parseInt()を使うときは第二引数（基数）まで指定した方がよいです。
【【JavaScript】parseInt()を使うときは第二引数まで指定した方がよい - 03LOG】
http://03log.me/blog/2014-06-11-js-parseint.html
以下参考URL：
【document.querySelector - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector
【document.querySelectorAll - Web API インターフェイス | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll
【配列ライクなオブジェクトをforEachするときのイディオム - ぷちてく - Petittech】
http://ptech.g.hatena.ne.jp/noromanba/20120521/1337639496
【jQueryを使わずjavascriptだけで書き直した際の記法メモ - Qiita】
http://qiita.com/moriyaman/items/3b3f7878f8ecc2b76372
【window.onloadとjQueryの$(document).ready等の比較】
http://rcmdnk.github.io/blog/2015/07/11/computer-javascript-jquery/
追記：
一応どういう方針で書かれているかをざっくり書いておきます。
方針：
0. チェックボックスと数値（select要素/input要素）の紐付けはid/nameではなく共通の親要素（tr要素）で行う
0. 表示/非表示の切り替えは JavaScript で行うのではなく、親要素にクラスを付けることによってCSSで行う
0. 計算はチェックボックスの状態を表している親要素のクラスと、それに紐付く数値（select要素/input要素）を一括で拾うことで処理する
0. イベントは伝播（バブリング）するので、親要素（#calculator）で取得し、イベントが起きた要素（e.target）のクラスを見て処理を分岐する
0. 項目の追加はチェックの付いていない1項目目を複製してtbodyに追加する
※ 「チェックの付いていない」という絞込みのため、全てチェックがあると失敗する。この限定をはずしたほうが良いとは思うがなんとなくそのままにした。
0. 項目番号はCSSの連番付与で処理する
投稿2016/06/25 18:27
編集2016/06/26 03:06総合スコア69407
大変親切にご回答いただきありがとうございます。3点目のご指摘など、まさに勉強不足の極み。。。（コメント有無は論外か。。。）
今、記載頂いた参考URLをみております。一つ一つ紐解きながら精進させていただきます。
ありがとうございました。
あと、「変わった書き方」という表現が身に染みますｗｗｗ失礼しました
あ、すいません、「コメントを付けない不親切なコード」と「変わった書き方」は自分のコードに対して書いたつもりでした。
nakimushitomatoさんの書き方はJavaScriptの入門書などでよくある形なので「一般的」だと思います。
0
for文で、idタグを連番指定して
.val()でidの値を取得します。
$('#取得したid').html(テーブル行) を追加していく。
どうでしょうか。
投稿2016/06/25 07:17
総合スコア236
あなたの回答
tips
プレビュー
