掲示板/JavaScript質問板/過去ログ/一覧/ 診断テストを作ろうとして…

0 名前： タダノ ： 2007/06/26（火） 20:49 ID:G7oDR3HF sub-HD: 選んだチェックボックスによって、3種類の裏タイプの数を変化させ、
3タイプの組み合わせによって、別々のURLに飛ぶような診断テストを作りたいのですが、
上手く作動しません。

JAVA専門なので、JavaScriptに詳しくなく、
ご指導頂ければ幸いです。

なお、チェック数が足りないとエラーメッセージが正常に表示されることから、
function newwindow(adult_checked,cute_checked,gorgeous_checked){
以下のエラーかと思われます。

また、現在
newWindow.document.write("http://ans1/");
となっていますが、
本当は送信ボタンをクリックすることによって、別URLに飛ばしたいと考えています。

合わせて方法をご指導頂ければ幸いです。

よろしくお願いします。

function test2(theForm){

//ラジオボタンの数
var radio_btn = 30;

//各タイプの問題数
var cnt = 5;

//要素の宣言
var adult_checked = 0;
var cute_checked = 0;
var gorgeous_checked = 0;

//どの問題がどの要素を持っているかを設定(括弧内はInputNameにより判断)
var adult = new Array("ans2","ans3","ans4","ans10","ans11");
var cute = new Array("ans1","ans5","ans9","ans12","ans15");
var gorgeous = new Array("ans6","ans7","ans8","ans13","ans14");

//問題の数
var question = 15;

//15個チェックされているかどうかの判別変数
var k = 0;

//選択した答えによって、要素の数を計算
for(var i=0; i<radio_btn; i++){ //ラジオボタンの数だけ回す。

if(theForm.elements[i].checked == true){

k++;

var radio_name = theForm.elements[i].name;
var radio_mark = parseInt(theForm.elements[i].value);

for(var j=0; j<cnt; j++){

if(adult[j] == radio_name){
adult_checked = adult_checked + radio_mark;
break;
}else if(cute[j] == radio_name){
cute_checked = cute_checked + radio_mark;
break;
}else if(gorgeous[j] == radio_name){
gorgeous_checked = gorgeous_checked + radio_mark;
break;
}
}
}
}

if(k<question){
massage = "すべての質問に回答してください。";
alert(massage);

}

}

function newwindow(adult_checked,cute_checked,gorgeous_checked){

//以下、各要素に入っている数によってタイプ分け、及びURLに値を代入

if (adult_checked < 3 && cute_checked < 3 && gorgeous_checked < 3) {
newWindow.document.write("http://ans1/");

}

else if (adult_checked < 3 && cute_checked < 3 && gorgeous_checked >= 3) {
newWindow.document.write("http://ans2/");

}

else if (adult_checked < 3 && cute_checked >= 3 && gorgeous_checked < 3) {
newWindow.document.write("http://ans3/");

}

else if (adult_checked < 3 && cute_checked >= 3 && gorgeous_checked >= 3) {
newWindow.document.write("http://ans4/");

}

else if (adult_checked >= 3 && cute_checked < 3 && gorgeous_checked < 3) {
newWindow.document.write("http://ans5/");

}

else if (adult_checked >= 3 && cute_checked < 3 && gorgeous_checked >= 3) {
newWindow.document.write("http://ans6/");

}

else if (adult_checked >= 3 && cute_checked >= 3 && gorgeous_checked < 3) {
newWindow.document.write("http://ans7/");

}

else if (adult_checked >= 3 && cute_checked >= 3 && gorgeous_checked >= 3) {
newWindow.document.write("http://ans8/");

}

}

1 名前：匿名： 2007/06/26（火） 20:49 ID:epW2eUw6 sub-8t: 見落としだと思いますが。
if (k < question){
massage = "すべての質問に回答してください。";
alert(massage);
} else {
newwindow(adult_checked, cute_checked, gorgeous_checked);
}
#マッサージ？

移動は
location.href = "http://ans1/";
サブウインドウなら
http://www.tagindex.com/javascript/window/index.html

2 名前： タダノ ： 2007/06/26（火） 20:49 ID:G7oDR3HF sub-HD: 返答ありがとうございます！

早速

function test2(theForm){

//ラジオボタンの数
var radio_btn = 30;

//各タイプの問題数
var cnt = 5;

//要素の宣言
var adult_checked = 0;
var cute_checked = 0;
var gorgeous_checked = 0;

//どの問題がどの要素を持っているかを設定(括弧内はInputNameにより判断)
var adult = new Array("ans2","ans3","ans4","ans10","ans11");
var cute = new Array("ans1","ans5","ans9","ans12","ans15");
var gorgeous = new Array("ans6","ans7","ans8","ans13","ans14");

//問題の数
var question = 15;

//15個チェックされているかどうかの判別変数
var k = 0;

//選択した答えによって、要素の数を計算
for(var i=0; i<radio_btn; i++){ //ラジオボタンの数だけ回す。

if(theForm.elements[i].checked == true){

k++;

var radio_name = theForm.elements[i].name;
var radio_mark = parseInt(theForm.elements[i].value);

for(var j=0; j<cnt; j++){

if(adult[j] == radio_name){
adult_checked = adult_checked + radio_mark;
break;
}else if(cute[j] == radio_name){
cute_checked = cute_checked + radio_mark;
break;
}else if(gorgeous[j] == radio_name){
gorgeous_checked = gorgeous_checked + radio_mark;
break;
}
}
}
}

if(k<q_item){
msg = "すべての質問に回答してください。";
alert(msg);
}else{
//各点数を判定。
newwindow(adult_checked,cute_checked,gorgeous_checked);
return;
}
}

function newwindow(adult_checked,cute_checked,gorgeous_checked){

//以下、各要素に入っている数によってタイプ分け、及びURLに値を代入

if (adult_checked < 3 && cute_checked < 3 && gorgeous_checked < 3) {
location.href = "http://ans1/";

}

else if (adult_checked < 3 && cute_checked < 3 && gorgeous_checked >= 3) {
location.href = "http://ans2/";

}

else if (adult_checked < 3 && cute_checked >= 3 && gorgeous_checked < 3) {
location.href = "http://ans3/";

}

else if (adult_checked < 3 && cute_checked >= 3 && gorgeous_checked >= 3) {
location.href = "http://ans4/";

}

else if (adult_checked >= 3 && cute_checked < 3 && gorgeous_checked < 3) {
location.href = "http://ans5/";

}

else if (adult_checked >= 3 && cute_checked < 3 && gorgeous_checked >= 3) {
location.href = "http://ans6/";

}

else if (adult_checked >= 3 && cute_checked >= 3 && gorgeous_checked < 3) {
location.href = "http://ans7/";

}

else if (adult_checked >= 3 && cute_checked >= 3 && gorgeous_checked >= 3) {
location.href = "http://ans8/";

}

}

と記入してみましたが、上手く作動しませんでした(ーー;)
お手数をおかけし申し訳ありません。
何か原因お分かりになりますでしょうか？？

3 名前：匿名： 2007/06/26（火） 20:49 ID:3p2QJGXn sub-uG: >>0,2
フォームを書いて、テスト可能な状態にして下さい。

# 申し訳ないが、コードからフォーム推測して書き起こすとか、脳内デバッグとかしたくないです。

4 名前： タダノ ： 2007/06/26（火） 20:49 ID:G7oDR3HF sub-HD: 大変失礼致しました。
以下がフォームになります。
cssが組み込まれてしまっているのですが、よろしくお願い致します。

<form method="post">


<div class="QuestionBox01">Question1.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans1" type="radio" value="1">
a</div>
<div class="AnswerBox01">
<input name="ans1" type="radio" value="0">
b</div>
</div>

<div class="QuestionBox01">Question2.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans2" type="radio" value="1">
a</div>
<div class="AnswerBox01">
<input name="ans2" type="radio" value="0">
b</div>
</div>

<div class="QuestionBox01">Question3.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans3" type="radio" value="1">
a</div>
<div class="AnswerBox01">
<input name="ans3" type="radio" value="0">
b</div>
</div>

<div class="QuestionBox01">Question4.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans4" type="radio" value="1">
a</div>
<div class="AnswerBox01">
<input name="ans4" type="radio" value="0">
b</div>
</div>

<div class="QuestionBox01">Question5.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans5" type="radio" value="1">
a</div>
<div class="AnswerBox01">
<input name="ans5" type="radio" value="0">
b</div>
</div>

<div class="QuestionBox01">Question6.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans6" type="radio" value="1">
a</div>
<div class="AnswerBox01">
<input name="ans6" type="radio" value="0">
b</div>
</div>

<div class="QuestionBox01">Question7.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans7" type="radio" value="0">
a</div>
<div class="AnswerBox01">
<input name="ans7" type="radio" value="1">
b</div>
</div>

<div class="QuestionBox01">Question8.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans8" type="radio" value="1">
a</div>
<div class="AnswerBox01">
<input name="ans8" type="radio" value="0">
b</div>
</div>

<div class="QuestionBox01">Question9.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans9" type="radio" value="1">
a</div>
<div class="AnswerBox01">
<input name="ans9" type="radio" value="0">
b</div>
</div>

<div class="QuestionBox01">Question10.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans10" type="radio" value="0">
a</div>
<div class="AnswerBox01">
<input name="ans10" type="radio" value="1">
b</div>
</div>

<div class="QuestionBox01">Question11.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans11" type="radio" value="0">
a</div>
<div class="AnswerBox01">
<input name="ans11" type="radio" value="1">
b
</div>
</div>

<div class="AnswerBox">
<div class="AnswerBox01"></div>
<div class="AnswerBox01"></div>
</div>


<div class="QuestionBox02"></div>

<div class="QuestionBox03">Question12.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans12" type="radio" value="0">
a</div>
<div class="AnswerBox01">
<input name="ans12" type="radio" value="1">
b
</div>
</div>

<div class="QuestionBox03">Question13.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans13" type="radio" value="0">
a</div>
<div class="AnswerBox01">
<input name="ans13" type="radio" value="1">
b</div>
</div>

<div class="QuestionBox03">Question14.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans14" type="radio" value="0">
a
</div>
<div class="AnswerBox01">
<input name="ans14" type="radio" value="1">
b
</div>
</div>

<div class="QuestionBox03">Question15.</div>

<div class="AnswerBox">
<div class="AnswerBox01">
<input name="ans15" type="radio" value="1">
a</div>
<div class="AnswerBox01">
<input name="ans15" type="radio" value="0">
b</div>
</div>
<br>
<br>


<input type="submit" value="診断する" onClick="test2(this.form);"> <input type="reset" value="リセット">
</form>

5 名前：匿名： 2007/06/26（火） 20:49 ID:/UQCBCoW sub-y9

>>2
いつの間にかquestionがq_itemに。

if(k<q_item){

>>4
return false;などとしてもいいのですが、ここは単に
<input type="button" value="診断する" onClick="test2(this.form);">
でいいのではないでしょうか。

6 名前：匿名： 2007/06/26（火） 20:49 ID:ygwAIfTN sub-Cz

>>4
私の言い方がマズかったけど、必要なのは input 要素の value 属性値だったわけで（そうでないと adult_checked、cute_checked、gorgeous_checked が何を示しているのか分からない）、div 要素や br 要素は全く不要ですよね。コードを提示する場合、無関係なものは取り去って下さい。

# ついでに言えば、その div 要素の使い方なら fieldset 要素を使うべきです。
# さらについでに言えば、ラジオボタンには初期選択値を指定することが強く求められています。HTML 2.0 が「選択されていないときは最初のラジオボランをチェックする」と規定していたためです。

動作に関しては、>>5 で示されている変数名エラー（エラーコンソールに出るはず）以外は問題ないように見えますが。

# その組み合わせなら以下で十分な気もしますけどね。

function newwindow (adult_checked, cute_checked, gorgeous_checked) {
    var n = (adult_checked >= 3) * 4 + (cute_checked >= 3) * 2 + (gorgeous_checked >= 3) * 1;

    location.href = [ 'ans1.html', 'ans2.html', 'ans3.html', 'ans4.html',
                      'ans5.html', 'ans6.html', 'ans7.html', 'ans8.html' ][n];
}

7 名前： タダノ ： 2007/06/26（火） 20:49 ID:G7oDR3HF sub-HD: >>4
>>5

ご丁寧な解説本当にありがとうございました！！お陰で無事作成することができました。
余計なタグの記述など、大変失礼致しました。