セレクトボックスから名前を選択して計算する方法を教えてください。
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.2
- 回答日時:
セレクトされた、値を配列のインデックスにするということですか?
それならこうだと思います。
<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
- 回答日時:
<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で「いいいいい」を選択したらその数値を15としたいので
box1[1]=15;
などとしているのですがそれをそのまま使うことはできないでしょうか?
box1 = new Array(10);
box1[0]=0;
box1[1]=15;
box1[2]=50;
といった感じです。1つのセレクトボックス辺り500程の選択枝があるのでこの入力したデータをできればそのまま使いたいです。
お手数ですがよろしくお願いします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript sessionStorageを調べています。 1 2023/06/20 12:41
- JavaScript switch文のswitch(n)の部分を複数の値にするか、if文に変えてほしいです。 1 2022/07/27 17:18
- JavaScript セレクトボックスを2つ設けて選択して初めてメッセを表示 1 2022/07/27 12:15
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
中百舌鳥駅と深井駅を入れ替え...
-
コードレビューをお願いします。
-
【JS】selectでchangeした時の...
-
JavaScriptで<select>の<option...
-
ホームページ作成 自動見積計算
-
javascriptでセレクトボックス...
-
1度きりではなく、繰り返し、挙...
-
VBScriptでHTMLのセレクトボッ...
-
ラジオボタンの値が取得できな...
-
javascriptで合計金額を算出し...
-
プルダウン選択を変更すると、...
-
select要素のvalueを配列で取得...
-
プルダウンで選択した項目にあ...
-
プルダウンの値によって活性・...
-
ラジオボタンとプルダウンを連...
-
全てのselect要素をデフォルト...
-
selectを変更不可にしたい
-
option 選択による表示&非表示
-
selectボックスで選択数を制限...
-
今日の日付を自動的にセレクト...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
複数のプルダウンを1つにまとめ...
-
全てのselect要素をデフォルト...
-
select要素のvalueを配列で取得...
-
Selectボックスの一覧表示方法
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
JavaScriptで<select>の<option...
-
<input>の選択肢をプルダウンメ...
-
VBScriptでHTMLのセレクトボッ...
-
【javascript】連想配列からセ...
-
webページの一部のみの更新につ...
-
3つのselectでURLパラメータを...
-
プルダウンの値によって活性・...
-
セレクトボックスで配列を呼び...
-
プルダウンの選択値により活性...
-
3つの連動したプルダウンメニュ...
-
selectボックスで選択数を制限...
おすすめ情報