締切済み

自動計算表示について

2008/03/08 18:51

http://www.tagindex.com/javascript/form/comp1b.html を参考に自動計算表示させるものを作っています。当然ながらソースをそのまま実行すれば動作するのですが単価を設定しセレクトボックスの選択項目の2番目を選択すると2倍、3番目を選択すると3倍と単純計算でしか増えず困っております。例えばセレクトボックスの選択項目が5個あるとしそれぞれに任意の料金を指定し合計金額を求める場合どのようにすればいいのでしょうか？

noname#65793

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

みんなの回答

noname#84373

2008/03/09 16:43 回答No.3

<html> <head><style>input{text-align:right}</style> Enterキーでフォーカスが移動する余計な機能付！<br/> <table border="1" id="h"> <tr><th>商品</th><th>単価</th><th>個数</th><th>小計</th></tr> <tr><td>a</td><td><input type="text" id="a1"></td><td><input type="text" id="b1"></td><td></td></tr> <tr><td>b</td><td><input type="text" id="a2"></td><td><input type="text" id="b2"></td><td></td></tr> <tr><td>c</td><td><input type="text" id="a3"></td><td><input type="text" id="b3"></td><td></td></tr> <tr><td>c</td><td><input type="text" id="a4"></td><td><input type="text" id="b4"></td><td></td></tr> <tr><td>c</td><td><input type="text" id="a5"></td><td><input type="text" id="b5"></td><td></td></tr> <tr><td></td><td></td><td>合計</td><td></td></tr> <script> window.onload = function() { obj = document.getElementsByTagName( 'input' ); for( var i=0; i<obj.length; i++){ if(i==0) obj[i].focus(); if(obj[i].type=='text' || obj[i].type=='textarea') { obj[i].onkeydown = function(){if(event.keyCode == 13) event.keyCode = 9;}; obj[i].onchange = calc; } } } var tn = 5; function calc(){ tb = $('h');g =0; for(i=1;i<=tn;i++){ g+= s =$('a'+i).value * $('b'+i).value; tb.rows[i].cells[3].innerHTML=s; } tb.rows[(tn+1)].cells[3].innerHTML=g; } function $(o){ return document.getElementById(o); } </script> </html>

ログインすると、全ての回答が全文表示されます。

arexis
ベストアンサー率66% (66/99)

2008/03/09 03:37 回答No.2

そこのサンプルをベースに書きます。 HTMLの方はSelectのオプションにvalueをつけて金額を入れます。 <option value="">選択してください</option> <option value="100">選択項目１</option> <option value="150">選択項目２</option> <option value="200">選択項目３</option> <option value="1000">選択項目４</option> <option value="3000">選択項目５</option> 関数の方は function keisan(){ // 設定開始 // セレクト1 var price1 = document.form1.goods1.value * 1; // document.form1.field1.value = price1; // // セレクト2 var price2 = document.form1.goods2.value * 1; // document.form1.field2.value = price2; // // セレクト3 var price3 = document.form1.goods3.value * 1; // document.form1.field3.value = price3; // // 合計を計算 var total = price1 + price2 + price3; // 設定終了 document.form1.field_total.value = total; // 合計を表示 }

ログインすると、全ての回答が全文表示されます。

auty
ベストアンサー率58% (284/486)

2008/03/08 19:50 回答No.1

＞＞＞　単純計算でしか増えず困っております。の言うところがよく分かりませんが、注意するところを述べてみます。・　値段に関して変更するところは、１商品につき2箇所で、かつこれ以上変更する必要はありません。たとえば、商品サンプル1 の場合、　　　1.　var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定　　　2.　500円の２箇所だけです。・　特に合計を出す　　　 var total = price1 + price2 + price3; を変更してはいけません。ここを扱うのは、商品の数が変わるときです。これで最初のソースコードからやり直してみてください。今気がつきましたが、＞＞＞　セレクトボックスの選択項目が5個というのは、「５個のセレクトボックス」ということでしょうか。つまりサンプルより「２個のセレクトボックス」が増える。これはまさに、上の「特に合計を出す」にあたります。この場合なら、同様にprice4 、 price5を準備して、　　　 var total = price1 + price2 + price3 + price4 + price5; という具合です。

ログインすると、全ての回答が全文表示されます。