セレクトボックスを使ったJavaScriptでの計算方法

質問

セレクトボックスから名前を選択して計算する方法を教えてください。

HTMLとJavaScriptは別に分けます。

----------.html----------
<table border="1">
<tr><td>武器</td>
<td><form name="myForm">
<select name="Item" size="1" tabindex="0">
<option value="0">あああああ</option>
<option value="1">いいいいい</option>
<option value="2">ううううう</option>
　　　　　・
　　　　　・
　　　　　・
　　　　　・
　　　　　・
</select>

</td></tr>
<tr><td>OP1</td>
<td>
<select name="OP1" size="1" tabindex="0">
<option value="0">AAAAA</option>
<option value="1">BBBBB</option>
<option value="2">CCCCC</option>
　　　　　・
　　　　　・
　　　　　・
　　　　　・
　　　　　・
</select>

</td></tr>
<tr><td>OP2</td>
<td>
<select name="OP2" size="1" tabindex="0">
<option value="0">aaaaa</option>
<option value="0">bbbbb</option>
<option value="0">ccccc</option>
　　　　　・
　　　　　・
　　　　　・
　　　　　・
　　　　　・
</select>

</td></tr>
<tr><td>OP2</td>
<td>
<select name="OP2" size="1" tabindex="0">
<option value="0">aaaaa</option>
<option value="0">bbbbb</option>
<option value="0">ccccc</option>
　　　　　・
　　　　　・
　　　　　・
　　　　　・
　　　　　・
</select>
</td></tr>
<tr><td colspan="2" align="center">
<input type="button" value="計算する" onclick="Calculation()">
<input type="reset" name="リセット" value="リセット">
</form>
</td></tr>

<tr><td colspan="2" align="center">
<form name="TxtArea"><input type="text" name="myResult" size="20">
</form>
</td></tr>
</table>

.jsではItemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としています。
box1[0]=10;
box1[1]=15;
といった感じです。
全部足し算で計算します。
どのようにすれば計算できるのかJavaScriptについて書かれてるページを見たのですが理解できなかったのでよろしくお願いします。

回答No.3

bscg0283 · ベストアンサー

スクリプトのアラートの変わりに代入すればよいので、

//myResultは結果表示したいAreaのnameです。
var Result = document.getElementById("myResult");

//結果を表示　AllSum = 合計値を計算した変数
Result.value = AllSum;

となりますね。

お礼

できました。
本当に親切にありがとうございます。

また何かあればよろしくお願いします。

回答No.2

bscg0283

セレクトされた、値を配列のインデックスにするということですか？
それならこうだと思います。

<script language="JavaScript">
function Calculation(){
var Item = document.getElementById("Item");
var Op1 = document.getElementById("OP1");
var Op2 = document.getElementById("OP2");
var Op3 = document.getElementById("OP3");

var AllSum = 0;

//ここで配列を作っておく
box1 = new Array(10);
box1[0]=0;
box1[1]=15;
box1[2]=50;

box2 = new Array(10);
box2[0]=0;
box2[1]=15;
box2[2]=50;

box3 = new Array(10);
box3[0]=0;
box3[1]=15;
box3[2]=50;

box4 = new Array(10);
box4[0]=0;
box4[1]=15;
box4[2]=50;

//それぞれで計算 Item.value Op1.value で示される配列の位置で計算
AllSum = AllSum + box1[Item.value];
AllSum = AllSum + box2[Op1.value];
AllSum = AllSum + box3[Op2.value];
AllSum = AllSum + box4[Op3.value];

alert(AllSum);
}
</script>

補足

素早い回答ありがとうございます。
こちらの場合は計算結果の出力はアラートで表示ですが、テキストエリアに出力するにはどのように変更すればよいでしょうか？

よろしくお願いします。

回答No.1

bscg0283

<script language="JavaScript">
function Calculation(){
//選択されるセレクトボックスを含むフォームをオブジェクトとして取得します。
var forms = document.getElementById("myForm");
var array = [];
var allsum = 0;
//取得したフォームオブジェトに含まれるエレメントの回数ループさせます。
//エレメントとは、フォーム内のテキストボックスやボタンなどの事をいいます.

for (var i = 0; i < forms.length; i++) {
//elem にエレメントを取得します
var elem = forms.elements[i];
//エレメントのname属性によって処理を分岐します
switch(elem.name){
case "Item":
//配列に格納しています。
array.push(elem.name + '=' + elem.value);
break;
case "OP1":
array.push(elem.name + '=' + elem.value);
break;
case "OP2":
array.push(elem.name + '=' + elem.value);
break;
case "OP3":
array.push(elem.name + '=' + elem.value);
break;
case "OP4":
array.push(elem.name + '=' + elem.value);
break;

}
//演算可能であれば合計用の変数に加算します.
//オブジェクト単位でスクリプトを書くと、ボタンも取得するので演算可能なものにしてます。
//別に、上記 switch　の分岐の中で合計を計算させてもOKです。オプションだけの合計などが欲しい場合は
//そうするといいでしょう。
if(isFinite(elem.value)){
//eval = 文字を数字に変換しています。
allsum = allsum + eval(elem.value);
}

}
array.push('合計 = ' + allsum);
var param = array.join('\n');

//全て配列変数 array に格納したので、全てをテキストとして連結させています
var Result = document.getElementById("TxtArea");

//結果を表示
Result.myResult.value = param;

}
</script>
<table border="1">
<tr><td>武器</td>
<td>

<select name="Item" size="1" tabindex="0">
<option value="0">あああああ</option>
<option value="1">いいいいい</option>
<option value="2">ううううう</option>
</select>
</td></tr>
<tr><td>OP1</td>
<td>
<select name="OP1" size="1" tabindex="0">
<option value="0">AAAAA</option>
<option value="1">BBBBB</option>
<option value="2">CCCCC</option>
</select>

中略

</td></tr>
</table>
</form>
<form name="TxtArea"><textarea rows="4" cols="20" name="myResult"></textarea></form>

これでわかりますか？

補足

早速回答ありがとうございます。

JavaScriptの事なんですが、Itemをbox1、OP1をbox2、OP3をbox3、OP3をbox4としていて、
例えばセレクトボックスのItemで「いいいいい」を選択したらその数値を１５としたいので
box1[1]=15;
などとしているのですがそれをそのまま使うことはできないでしょうか？
box1 = new Array(10);
box1[0]=0;
box1[1]=15;
box1[2]=50;
といった感じです。１つのセレクトボックス辺り500程の選択枝があるのでこの入力したデータをできればそのまま使いたいです。
お手数ですがよろしくお願いします。