マンガでよめる痔のこと・薬のこと

http://www.tagindex.com/javascript/form/comp1b.h …
を参考に自動計算表示させるものを作っています。

当然ながらソースをそのまま実行すれば動作するのですが単価を設定しセレクトボックスの
選択項目の2番目を選択すると2倍、3番目を選択すると3倍と単純計算でしか増えず困っております。

例えばセレクトボックスの選択項目が5個あるとしそれぞれに任意の料金を指定し合計金額を求める場合
どのようにすればいいのでしょうか?

このQ&Aに関連する最新のQ&A

A 回答 (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>
    • good
    • 0

そこのサンプルをベースに書きます。



HTMLの方はSelectのオプションにvalueをつけて金額を入れます。
<option value="">選択してください</option>
<option value="100">選択項目1</option>
<option value="150">選択項目2</option>
<option value="200">選択項目3</option>
<option value="1000">選択項目4</option>
<option value="3000">選択項目5</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; // 合計を表示

}
    • good
    • 0

>>> 単純計算でしか増えず困っております。


の言うところがよく分かりませんが、注意するところを述べてみます。

・ 値段に関して変更するところは、1商品につき2箇所で、かつこれ以上変更する必要はありません。たとえば、商品サンプル1 の場合、
   1. var price1 = document.form1.goods1.selectedIndex * 500; // 単価を設定
   2. 500円
の2箇所だけです。

・ 特に合計を出す
   var total = price1 + price2 + price3;
を変更してはいけません。ここを扱うのは、商品の数が変わるときです。

これで最初のソースコードからやり直してみてください。

今気がつきましたが、
>>> セレクトボックスの選択項目が5個
というのは、「5個のセレクトボックス」ということでしょうか。つまりサンプルより
「2個のセレクトボックス」が増える。これはまさに、上の「特に合計を出す」にあたります。

この場合なら、同様にprice4 、 price5を準備して、
   var total = price1 + price2 + price3 + price4 + price5;
という具合です。
    • good
    • 0

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!


人気Q&Aランキング