前提・実現したいこと
HTMLとJavaScriptでラジオボタンを用いて数値計算をするときに
ラジオグループAの項目を選択していた場合、ラジオグループBの数値を半額にする
例:果物(グループA)を買っている場合、かご(グループB)を1000円(50%off)で購入できる
取得した値を足し合わせ正規表現に直した後テキストボックスに表示する←ここはできている
という動作を実装したいのですがどのようにすればいいのでしょうか
発生している問題・エラーメッセージ
テキストボックスに数値が表示されない(どの段階の処理で止まっているかは不明)
該当のソースコード
JavaScript
1function keisan(){ 2 3var i; 4var p1 = 0; 5var p2 = 0; 6 7var group1 = document.getElementsByName("group1"); //チェック済みのラジオボタンを調べて値を取得 8for(i=0; i<group1.length; i++){ 9if(group1[i].checked){ 10p1 = group1[i].value; 11break; 12} 13} 14var group2 = document.getElementsByName("group2"); 15for(i=0; i<group2.length; i2++){ 16if(group2[i].checked ){ 17 p2 = group2[i].value; 18break; 19} 20} 21 22var price1 = p1 * document.form1.volume1 .selectedIndex; // 数量×単価 23var price2 = p2 // 単価 24 25var price1 = parseInt(group1)+parseInt(group2) 26 27//表示用の金額を3桁区切りに変換 28var data = new Array(price1); 29var len = data.length; 30 31for(cnt=0;cnt<len;cnt++){ 32data[cnt] = new String(data[cnt]).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"); //正規表現で3桁ごとにカンマで区切る 33} 34 35//フォームに表示する金額 36document.form1.field_price1.value = data[1]; 37}
HTML
1<h3 data-label="01"><span>ご希望の商品</span></h3> 2 <ul> 3 <li> 4<label> 5 <input type="radio" name="group1" id="group1" value="100" onClick="keisan()" /><span class="radio">りんご</span> 6 <span>単価 100円/1個</span> 7 </label> 8 </li> 9 </ul> 10 <ul> 11 <li> 12 <label> 13 <input type="radio" name="group1" id="group1" value="200" onClick="keisan()" /><span class="radio">桃<br class="sp_only"> 14 <span>単価 200円/1個</span> 15 </label> 16 </li> 17 </ul> 18 <ul> 19 <li> 20 <label> 21 <input type="radio" name="group1" id="group1" value="120" onClick="keisan()" /><span class="radio">みかん</span> 22 <span>単価 120円/1個</span> 23 </label> 24 </li> 25 </ul> 26 <ul> 27 <li> 28 <label> 29 <input type="radio" name="group1" id="group1" value="220" onClick="keisan()" /><span class="radio">梨</span> 30 <span>単価 220円/1個</span> 31 </label> 32 </li> 33 </ul> 34 </div> 35 </div> 36 <div class="shohin2"> 37 <h3 data-label="05"><span>ご希望の商品</span></h3> 38 <ul> 39 <li> 40 <label> 41 <input type="radio" name="group2" id="group2" value="2000" onClick="keisan()" /><span class="radio">かご</span> 42 <span>単価 2000円/1個</span> 43 </label> 44 </li> 45 </ul> 46 <ul> 47 <li> 48 <label> 49 <input type="radio" name="group2" id="group2" value="1000" onClick="keisan()" /><span class="radio">箱<br class="sp_only"> 50 <span>単価 1000円/1箱</span> 51 </label> 52 </li> 53 54 </ul> 55<div class="estimate_result"> 56 <h3 class="kingaku">合計金額</h3> 57 <dl> 58 <dt>施工費</dt> 59 <dd><input type="text" name="field_price1" size="8" value="0"> 円</dd> 60</dl> 61</div>
試したこと
JavaScript
1var group2 = document.getElementsByName("group2"); 2for(i=0; i<group2.length; i2++){ 3if(group2[i].checked ){ 4 if(group1[i].checked ){ 5 p2 = group2[i].value*0.5; 6 }else{ 7 p2 = group2[i].value; 8break;
など色々試しました
回答2件
あなたの回答
tips
プレビュー