JavaScriptとラジオボタンの連動

###前提・実現したいこと
ラジオボタンで入力した値を使って配列に格納したデータを探し出し表示したい。

###発生している問題・エラーメッセージ

ラジオボタンを選択し、結果を出力しようとしても元のページに戻ってしまう。
また、以下のエラーメッセージが表示される。

Uncaught TypeError: Cannot read property 'length' of undefined

###該当のソースコード

HTML
1  <form name="form1" action="">
2    <input id="Radio11" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
3      <label for="Radio11">選択肢 １</label><br/>
4    <input id="Radio12" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
5      <label for="Radio12">選択肢 ２</label><br />
6    <input id="Radio13" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
7      <label for="Radio13">選択肢 ３</label><br />
8  </form>
9  <br />
10  <form name="form2" action="">
11    <input id="Radio21" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
12        <label for="Radio21">選択肢 １</label><br/>
13    <input id="Radio22" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
14      <label for="Radio22">選択肢 ２</label><br />
15    <input id="Radio23" name="RadioGroup1" type="radio" onchange="onRadioButtonChange();" />
16      <label for="Radio23">選択肢 ３</label><br />
17  </form>
18   <br />
19  <form name="form00">
20  <input type="submit" value="結果表示" onClick="JavaScript:searchDisp();">
21  </form>

Javascript
1var a, b, c, sword;
2
3function onRadioButtonChange() {
4  check11 = document.form1.Radio11.checked;
5  check12 = document.form1.Radio12.checked;
6  check13 = document.form1.Radio13.checked;
7
8  check21 = document.form2.Radio21.checked;
9  check22 = document.form2.Radio22.checked;
10  check23 = document.form2.Radio23.checked;
11
12  if (check11 == true) {
13    a = 1;
14  } else if (check12 == true) {
15    a = 2;
16  } else if (check13 == true) {
17    a = 3;
18  }
19
20  if (check21 == true) {
21    b = 1;
22  } else if (check22 == true) {
23    b = 2;
24  } else if (check23 == true) {
25    b = 3;
26  }
27
28  var sword = a * 10 + b;
29}
30
31db = new Array;
32
33db[11] = "データ11";
34db[12] = "データ12";
35db[13] = "データ13";
36db[21] = "データ21";
37db[22] = "データ22";
38db[23] = "データ23";
39db[31] = "データ31";
40db[32] = "データ32";
41db[33] = "データ33";
42
43function searchDisp() {
44  var swordLength = sword.length;
45  if (swordLength < 2) { alert("選択されていない項目があります。"); exit; }
46
47  document.write("<html><head><title>結果</title></head>");
48  document.write("<body><div align='center'>");
49	document.write("<a href='JavaScript:history.back()'>もどる</a><br><br>結果</div><hr>\n");
50	document.write("<div align='center'><table border='1'>");
51
52  for (var i = 11; i < 33; i++) {
53    if (i == sword){
54      document.write("<tr><td>");
55      document.write(db[sword]);
56      document.write("</td></tr><table></div></body></html>");
57      break;
58    }
59  }
60}

正直、自分のやりたいことがこのような形で実現できるのか分からないほどの初心者で申し訳ありません。
どうぞよろしくお願いいたします。

行動規範の内容に同意します

回答3件

提示されたソースから無駄な属性や要素を削除しています。

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<form action="">
9			<div>
10				<label>
11					<input type="radio" name="radio1" value="1" /> 選択肢1
12				</label>
13				<label>
14					<input type="radio" name="radio1" value="2" /> 選択肢2
15				</label>
16				<label>
17					<input type="radio" name="radio1" value="3" /> 選択肢3
18				</label>
19			</div>
20			<div>
21				<label>
22					<input type="radio" name="radio2" value="1" /> 選択肢1
23				</label>
24				<label>
25					<input type="radio" name="radio2" value="2" /> 選択肢2
26				</label>
27				<label>
28					<input type="radio" name="radio2" value="3" /> 選択肢3
29				</label>
30			</div>
31			<p>
32				<button type="button" id="check">結果</button>
33			</p>
34
35			<div id="response">
36
37			</div>
38		</form>
39		<script type="text/javascript">
40			var check = function () {
41				var questions = [];
42				var res = {};
43				var radios = document.getElementsByTagName('input');
44				for (var i = 0; i < radios.length; i++) {
45					if (-1 >= questions.indexOf(radios[i].name)) {
46						questions.push(radios[i].name);
47					}
48					if (radios[i].checked) {
49						res[radios[i].name] = radios[i].value;
50					}
51				}
52				for (var i = 0; i < questions.length; i++) {
53					var ans = document.createElement('p');
54					if (questions[i] in res) {
55						ans.innerHTML = questions[i] + ':' + res[questions[i]];
56					}
57					document.getElementById('response').appendChild(ans);
58				}
59			};
60			document.getElementById('check').addEventListener('click', check);
61		</script>
62	</body>
63</html>

投稿2016/10/26 10:11

退会済みユーザー

総合スコア0

ryoku

2016/10/26 13:19

ご回答いただきありがとうございます。選んだ選択肢それぞれではなくdbの中に入っているデータを出力できればと考えております。一つ目を選択肢1、二つ目を選択肢2としたときにdb[12]の中にある"データ12”を結果として出力するということは可能でしょうか。よろしくお願いいたします。

退会済みユーザー

2016/10/26 13:29

話が漠然としすぎています。「できますか」と聞かれても、「判断材料がなくて、できるともできないとも言えません。」

ryoku

2016/10/27 11:54

再度ご回答いただきありがとうございます。質問が分かりにくく申し訳ありません。色々といじっていたらFirefoxとIEでは自分の表示したいものの最低限は表示できるようになりました。ありがとうございました。

行動規範の内容に同意します

ちょっとなにをやりたいかわかりませんが、
searchDisp() 内にあるvar swordLength = sword.length;について
グローバル変数のswordはvarで宣言されているだけですからlength
プロパティを持っているようには思えません。

なにをすると、どうしたいのかを書かれたほうが速いかもしれません

投稿2016/10/26 09:18

yambejp

総合スコア114775

ryoku

2016/10/26 13:11

ご回答いただきありがとうございます。質問内容が分かりにくく申し訳ありません。やりたいこととしてはシナリオシミュレーションのようなものをやりたいと思っており、いくつかある選択肢をラジオボタンで選択してもらうことで将来シナリオを選択してもらい、それに合うデータを配列から選び出して表示したいと考えております。具体的には一つの目の選択肢で選択肢1、二つ目の選択肢で選択肢2を選んだら、結果としてdb[12]の中身の”データ12”を表示するというようにしたいと考えております。 var swordLength = sword.length;は選んでいない選択肢があった場合にarertを出したいと思い記述しました。よろしくお願いいたします。

行動規範の内容に同意します

ベストアンサー

JavaScript
1// var a, b, c, sword;
2// ↓
3   var a, b, c, sword = 0;

JavaScript
1// var swordLength = sword.length;
2// if (swordLength < 2) { alert("選択されていない項目があります。"); exit; }
3// ↓
4   var swordLength = sword;
5   if (swordLength < 2) { alert("選択されていない項目があります。"); return; }

投稿2016/10/26 09:30

kei344

総合スコア69400

ryoku

2016/10/26 13:15

ご回答いただきありがとうございます。お陰様でエラーは表示されなくなりましたが、やはり結果は表示されないようです。どのようにすれば選択の結果を受けて配列からデータを取り出すことができるでしょうか。一つ目で選択肢1、二つ目で選択肢2を選んだ場合にdb[12]の”データ12"が表示できるようにしたいと考えております。よろしくお願いいたします。

kei344

2016/10/26 14:28

searchDisp関数は最後でreturn false;をしないとフォームをポストしてしまいます。というかJSで結果を書き換えるだけならフォームに囲わずbutton要素とか使ってください。あと var sword = a * 10 + b; を sword = a * 10 + b; document.writeで <HTML>とかは出力するものではないので、何か最近の入門書などを買ってdocument.innerHTML とかにしてください。

ryoku

2016/10/27 11:57

再度ご回答いただきありがとうございます。 searchDisp関数ではそうしないとダメなんですね。勉強になります。長くなってしまい申し訳ありませんが、下記のようにしましたらFirefoxとIEでは表示したい結果になりました。 chromeではやはり同じようにフォームがポストされる結果となります。ただdocument.innerHTMLにするとFirefoxでもIEでもうまくいかず、また選択されていないものがあってもalertが出ずにundefinedという結果が表示されるという状態なので、もう少し色々と調べていじってみます。ご教示いただきありがとうございました。 var a, b, c, sword; function onRadioButtonChange() { check11 = document.form1.Radio11.checked; check12 = document.form1.Radio12.checked; check13 = document.form1.Radio13.checked; check21 = document.form2.Radio21.checked; check22 = document.form2.Radio22.checked; check23 = document.form2.Radio23.checked; if (check11 == true) { a = 1; } else if (check12 == true) { a = 2; } else if (check13 == true) { a = 3; } if (check21 == true) { b = 1; } else if (check22 == true) { b = 2; } else if (check23 == true) { b = 3; } sword = a * 10 + b; } db = new Array; db[11] = "データ11"; db[12] = "データ12"; db[13] = "データ13"; db[21] = "データ21"; db[22] = "データ22"; db[23] = "データ23"; db[31] = "データ31"; db[32] = "データ32"; db[33] = "データ33"; function searchDisp() { var swordLength = sword; if (swordLength < 2) { alert("選択されていない項目があります。"); return false; } document.write("<html><head><title>結果</title></head>"); document.write("<body><div align='center'>"); document.write("<a href='JavaScript:history.back()'>もどる</a><br><br>結果</div><hr>\n"); document.write("<p align='center'>"); for (var i = 11; i < 33; i++) { if (db[i] == db[sword]){ document.write(db[sword]); document.write("</p></body></html>"); break; } } }

kei344

2016/10/28 10:10

前回のコメントを参照ください。

行動規範の内容に同意します

あなたの回答