![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
以前http://oshiete.goo.ne.jp/qa/6872183.htmlにてご質問させていただきました。
合計の数値までだすことはできたのですが、selectboxを数値の分だけだすのができなくて困っています。
<script type="text/javascript">
function calculate(){
var test1 = parseInt(document.getElementById('test1').options[document.getElementById('test1').selectedIndex].value);
var test2 = parseInt(document.getElementById('test2').options[document.getElementById('test2').selectedIndex].value);
var test3 = parseInt(document.getElementById('test3').options[document.getElementById('test3').selectedIndex].value);
var test4 = parseInt(document.getElementById('test4').options[document.getElementById('test4').selectedIndex].value);
if(isNaN(test1)){test1 = 0;}
if(isNaN(test2)){test2 = 0;}
if(isNaN(test3)){test3 = 0;}
if(isNaN(test4)){test4 = 0;}
document.getElementById('total').innerHTML = test1 + test2 + test3 + test4;
}
</script>
<select name="test1" onChange="calculate()">
<opiton value="1">1</opiton>
<opiton value="2">2</opiton>
<opiton value="3">3</opiton>
<opiton value="4">4</opiton>
<opiton value="5">5</opiton>
</select>
<select name="test2" onChange="calculate()">
<opiton value="1">1</opiton>
<opiton value="2">2</opiton>
<opiton value="3">3</opiton>
<opiton value="4">4</opiton>
<opiton value="5">5</opiton>
</select>
<select name="test3" onChange="calculate()">
<opiton value="1">1</opiton>
<opiton value="2">2</opiton>
<opiton value="3">3</opiton>
<opiton value="4">4</opiton>
<opiton value="5">5</opiton>
</select>
<select name="test4" onChange="calculate()">
<opiton value="1">1</opiton>
<opiton value="2">2</opiton>
<opiton value="3">3</opiton>
<opiton value="4">4</opiton>
<opiton value="5">5</opiton>
</select>
<select name="test5" onChange="calculate()">
<opiton value="1">1</opiton>
<opiton value="2">2</opiton>
<opiton value="3">3</opiton>
<opiton value="4">4</opiton>
<opiton value="5">5</opiton>
</select>
<p id="total">0</p>
がソースになります。
お分かりの方がいらっしゃいましたらご教示お願いします。
No.6ベストアンサー
- 回答日時:
このながれだと、おれがぜんぶかいてしまいそうだ。
やばい!×2。(いつもかぶせてくるひとが、ちがうほうでいそがしそうだし(笑))
あとは、がんばってね。(ますますださくなってしまった)
<!DOCTYPE html>
<title></title>
<style type="text/css">
table, td, th { border:1px red solid;}
</style>
<body>
<table id="tb">
<tr>
<th>test</th>
<td><input type="button" value="create" onclick="hoge('mn0',1,1);hoge('mn1',1,2)"></td>
</tr>
<tr>
<th>0</th>
<td>ここにセレクトが</td>
</tr>
<tr>
<th>1</th>
<td>ここにセレクトが</td>
</tr>
</table>
<script>
var members = ['', '碓井 健平','平岡 康裕','岩下 敬輔','ボスナー'];
var members_no = ['', 29, 3, 5, 17];
var select = createSelect (members, members_no);
function createSelect (aryText, aryValue, selectedNo) {
var d = document;
var s = d.createElement ('select');
var o = s.options;
if (2 > arguments.length)
aryValue = aryText;
for (var i = 0, I = aryText.length; i < I; i++) {
o[o.length] = new (d.parentWindow || d.defaultView).Option (String (aryText[i]) || '', String (aryValue[i]) || '');
}
s.selectedIndex = selectedNo || 0;
return s;
}
function hoge (name, x, y) {
var table = document.getElementById ('tb');
var target = table.rows[y].cells[x];
var clone = select.cloneNode (true);
clone.name = name;
while (target.hasChildNodes ())
target.removeChild (target.firstChild);
target.appendChild (clone);
}
</script>
No.5
- 回答日時:
なんとなくわかった。
でもきっと、それでもふそく。えんちょうせんとかないのか?
PKのけっかとか、ひつようないのか?
たいせんあいてチームのぶんもひつようじゃないのか?
にゅうりょくしたけっかを、さーばーとかにあっぷするの?
それなら、input ようそとかの、けっかをうけとる cgi がわにあわせなくていいの?
と、いろいろと。
はやいはなし、HTMLのこっかくぶぶんだけでも、かいてくれると、もうそうしやすいよ。
さいしんのぶらうざでもよさそうだね。(にやり)
No.4
- 回答日時:
ごめんなさい。
しょうじきなところ、あなたのきぼうする かんせいずがわかりません。>質問内容にある記述内容ではできないのでしょうか?
これは、あなたのていじした、さんぷるのことですよね。
どのたいみんぐで、どのばしょに、select ようそを、どのようなないようで、ひょうじするのかそうぞうりょくにとぼしい、わたしにはわかりません。
select ようそが5こあるのに、
var test1 = parseInt(document.getElementById('test1').options[document.getElementById('test1').selectedIndex].value);
が、test4 までの4こしかなく、
それをるーぷしょりしているわけでもなく、
document.getElementById('test1') が、2どもしゅつげんし、むだにながかく、
document.getElementById('test1').value で、あたいをさんしょうできたのに・・・
parseInt のだい2ひきすうに、10がなかったり、
<opiton value="1">1</opiton> に、selected をしていしていなために、
if(isNaN(test1)){test1 = 0;} のようなしょりを、いれるけっかとなっていたり、
と、どこにも select ようそを、ついかするぶぶんがありません。
(あっもう~朝だ。1行づつステップ実行させているのに理解できない日々が続く)
この回答への補足
説明不足で申し訳ありません。
なぜselectboxを増やしていくのかは自分やりたいサイトは参考サイトにあります。
http://www.s-pulse.co.jp/games/result/2011030507/の試合結果部分のみです。
参考サイトで簡単にご説明しますと入力画面にて前半と後半の得点がプラスされて3になり、なおかつプラスされた分だけ得点者欄に(3つの)selectboxが表示され、指名などを選択できるという作りをしたいと思っています。
自分でやる分には入力すれば早いのですが、別の人も触るためです。
>test4 までの4こしかなく
こちらは一つ抜けて入力していました。申し訳ありません。
>どこにも select ようそを、ついかするぶぶんがありません。
自分の知識不足で申し訳ありません。自分に考えて作ったのですが、ダメでしたか。
No.3
- 回答日時:
ぐだぐだなうえに、ねむくて、ちからつきる。
OTL<!DOCTYPE html>
<title></title>
<form action="#">
<p>
<select name="test1" onchange="calc (event);">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="test2" onchange="calc (event);">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="test3" onchange="calc (event);">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="test4" onchange="calc (event);">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="test5" onchange="calc (event);">
<option value="0" selected>0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p id="total">0</p>
<p id="numbers"></p>
</form>
<script type="text/javascript">
function createSelect (aryText, aryValue, selectedNo) {
var d = this || document;
var s = d.createElement ('select');
var o = s.options;
if (2 > arguments.length)
aryValue = aryText;
for (var i = 0, I = aryText.length; i < I; i++) {
o[o.length] = new (d.parentWindow || d.defaultView).Option (String (aryText[i]) || '', String (aryValue[i]) || '');
}
s.selectedIndex = selectedNo || 0;
return s;
}
function calc (event) {
var c, d, s, t, i, j, J, o, t, u, v, w;
var e = event.target || event.srcElement;
var r = /^test\d+$/;
if (r.test (e.name)) {
c = e.form.elements;
d = e.ownerDocument;
u = d.getElementById ('numbers');
s = createSelect.call (d, [0,1,2,3,4,5,6,7,8,9]);
while (u.hasChildNodes ())
u.removeChild (u.firstChild);
for (t = i = 0; o = c[i++]; ) {
if (r.test (o.name)) {
t += (J = Number (o.value));
if (u.hasChildNodes ())
u.appendChild (d.createTextNode (' - '));
for (j = 0; j < J; j++) {
w = s.cloneNode (true);
w.name = 'number_' + i + '_' + j;
u.appendChild (w);
}
}
}
d.getElementById ('total').firstChild.nodeValue = t;
}
}
</script>
お疲れのとこ回答いただき有難う御座います。
上記の内容でためさせていただきましたところできました。
しかし、わがままではありますが質問内容にある記述内容ではできないのでしょうか?
大変申し訳ありませんが、応用力がなく教えていただいた内容から変更ができなく困っています・・・
宜しくお願いします。
No.2
- 回答日時:
また、よくしつもんをみないで、かいとうしてしまったらしい。
>selectboxを数値の分だけだすのができなくて困っています。
この selectbox ってどんなの?(なかみもふくめて)
さいだいで、5×5で、25こものそれが、ひつようなの?
てんきーから、うちこんだほうが、はやくない?
それでもそれが、かんがえうるさいてきな、ゆーざーいんたーふぇーす?
No.1
- 回答日時:
ぜんかくくうはくは、はんかくにしてね。
select ようそに、 onchange="calc (event);" をつけていますが、
form ようそだけにつけて、うごくぶらうざもあります。
(いきぬきにかいたので、やっぱりいまひとつ)
<!DOCTYPE html>
<meta charset="UTF-8">
<title></title>
<body>
<form action="#">
<p>
<select name="test1" onchange="calc (event);">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="test2" onchange="calc (event);">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="test3" onchange="calc (event);">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="test4" onchange="calc (event);">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
<select name="test5" onchange="calc (event);">
<option value="1" selected>1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</p>
<p id="total">5</p>
</form>
<script type="text/javascript">
function calc (event) {
var c, d, t, i, o;
var e = event.target || event.srcElement;
var r = /^test\d+$/;
if ('SELECT' !== e.nodeName)
return;
c = e.form.elements;
d = e.ownerDocument;
for (t = i = 0; o = c[i++]; )
if (r.test (o.name))
t += Number (o.value);
d.getElementById ('total').firstChild.nodeValue = t;
}
</script>
<script type="application/javascript; version=1.8">
function calc2 (event) {
let e = event.target;
let d = e.ownerDocument;
let f = e.form;
if ('SELECT' === e.nodeName) {
d.querySelector ('#total').textContent =
String (Array.reduce (f.querySelectorAll ('select[name^="test"]'),
(function (r, s) r + Number (s.value)), 0))
}
}
</script>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 以前の質問だと、どの条件でも配列が表示されてしまいます。 1 2022/07/09 11:40
- JavaScript console.logがどうしても2つ機能しないのでアドバイスをくださいお願いします 2 2022/07/07 22:13
- JavaScript JavascriptからSQLへ繋ぎ方が分からない 3 2022/07/07 00:27
- JavaScript セレクトボックスで配列を呼び出したい。 1 2022/07/08 20:14
- JavaScript セレクトボックスを2つ選択してメッセージなどを表示するには。~運賃検索プログラムを完成させたい~ 1 2022/07/22 11:10
- JavaScript 2段階プルダウンで1段階目の選択を終えた後に選択ボックスを見えなくしたい 2 2022/07/05 21:58
- JavaScript 電車の運賃を出すプログラムを作っています。 2 2022/06/22 09:36
- JavaScript コードレビューをお願いします。 1 2022/07/16 05:38
- JavaScript javascript作成してます。ラジオボタンで判定するコードを書いてます。 1 2023/07/18 11:03
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
プルダウン選択を変更すると、...
-
selectを変更不可にしたい
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンの選択に応じてプ...
-
javascriptでoptionタグを削除...
-
リストボックス内の重複したも...
-
VBScriptでHTMLのセレクトボッ...
-
複数のプルダウンメニューの組...
-
セレクトボックスを未選択の状...
-
Javascriptでフォームのセレク...
-
プルダウンの選択値により活性...
-
selectのnameが配列の場合
-
selectボックスの選択結果を変...
-
ラジオボタンの値が取得できな...
-
複数のプルダウンを1つにまとめ...
-
1度きりではなく、繰り返し、挙...
-
javascriptでセレクトボックス...
-
連想配列からセレクトボックス...
-
プルダウンの値をphpファイルへ...
-
セレクトボックス自動表示
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
javascriptでセレクトボックス...
-
selectを変更不可にしたい
-
全てのselect要素をデフォルト...
-
<input>の選択肢をプルダウンメ...
-
Selectボックスの一覧表示方法
-
プルダウン選択を変更すると、...
-
セレクトボックスで配列を呼び...
-
JavaScriptで<select>の<option...
-
プルダウンのoptionの表示・非...
-
select要素のvalueを配列で取得...
-
【javascript】連想配列からセ...
-
ラジオボタンとプルダウンを連...
-
同じ名前のセレクトがある場合...
-
selectボックスの選択結果を変...
-
プルダウンの値によって活性・...
-
javascriptで合計金額を算出し...
-
プルダウンメニューに連動する...
-
リストボックス内の重複したも...
-
VBScriptでHTMLのセレクトボッ...
-
連想配列を使ってコンボボック...
おすすめ情報