WEB相談室

Webページ作成に関しての何でも掲示板です。

タイトル:JavaScriptによる計算で・・・

0:[投稿] YYY [2003/02/18 12:38 ][環境:IE6,WIN98 わからない]

いきなりの質問で恐縮ですが
「***チェック」といった内容でいくつかの項目を設定し
ラジオボタンによりY/Nのチェックを行います。
最終的に判定ボタンをクリックするとYESの数をカウントして
TEXTエリアに表示させる方法を考えています。

ところがJavaScriptは既存のScriptを改変して使うぐらいしか
処理したことがありません。

1項目のみのラジオボタンを判定し変化させるスクリプトは
見つかったのですが、複数の項目を判定し計算結果を表示させる
スクリプトのサンプルを見つけることができませんでした。

どこかでそのような解説をしているページをご存知ないでしょうか?

これを機会にJavaScriptをある程度使えるようになろうと思ってます。
できれば解説があるページをご教示頂けませんでしょうか?


1:[回答] ごだっち [MAIL] [2003/02/18 13:32 ]

<script language="javascript" type="text/javascript">
<!--
function h(){
    var c = 0;
    var mobj = window.document.forms[0];
    var n = mobj.elements.length;
    for(i=0; n>i; i++){
        var obj = mobj.elements[i];
        if((obj.value=="yes")&&(obj.checked)){
            c++;
        }
    }
    mobj.yes_count.value = c;
}
//-->
</script>
<form>
yes:<input type="radio" name="q1" value="yes">|no:<input type="radio" name="q1" value="no"><br>
yes:<input type="radio" name="q2" value="yes">|no:<input type="radio" name="q2" value="no"><br>
yes:<input type="radio" name="q3" value="yes">|no:<input type="radio" name="q3" value="no"><br>
yes:<input type="radio" name="q4" value="yes">|no:<input type="radio" name="q4" value="no"><br>
yes:<input type="radio" name="q5" value="yes">|no:<input type="radio" name="q5" value="no"><br>
<input type="text" name="yes_count" size="2"><input type="button" onClick="javascript:h();" value="count">
</form>


2:[回答] ごだっち [MAIL] [2003/02/18 13:39 ]

サンプルだけ示しても片手落ちですね。内容を解説します。

まず、countと表示されたボタンをクリックすると、自身で定義した関数h()が呼ばれます。

h()の内容は、

1.フォーム内の要素(elements)の数(length)を調べて、forループを回しながら一つ一つの要素(elements[i])のvalueとチェック状態(checked)を調べます。

2.valueが"yes"で、かつ、チェックされていたら、変数cに1加算します。

3.全部の要素を調べ終わったら、テキスト入力欄("yes_count")の値として、c(の値)を代入します。

そういう感じの処理を行っています。


3:[関連] YYY [2003/02/18 15:17 ]

こだっちさんレスありがとうございます。
とりあえず上記ソースを元にチャレンジしてみます。


4:[質問] YYY [2003/02/18 15:42 ]

動作としては思った通りの動作をしてくれました。
が・・・
ラジオボタンの選択肢が複数になった場合とか
チェック漏れの判定とかを同時に行いたい場合の処理が・・・

「解説の・・・」とお伺いしたのも
以前にこの掲示板で質問した時に回答を頂いたのですが
仕様を変更したい時に元のスクリプトの意味がちんぷんかんぷんで
結局数度にわたって質問をせざるをえなかったからです。

なんとか自力で仕様変更が行える程度に処理ができるように
なりたいのですがスクリプトの各行の意味を理解していないと
変更もまったくできないので勉強しようと思いまして。

ともあれ、ごだっちさんには大感謝です。ありがとうございます。


5:[回答] ごだっち [MAIL] [2003/02/19 11:15 ]

ちょうど良さそうなサイトが判らなかったので、
説明つきのサンプルを作ってみました。

<script language="javascript" type="text/javascript">
<!--
function h(){
 var b = 2; // カウント対象外の要素(表示セル、開始ボタン)の数
 var c = 0; // カウントの初期値(ゼロから開始)
 var f = 1; // フラグ(ゼロは未チェックを示す)
 var n0 = ""; // 要素の名前保持用の変数
 var n1 = ""; // 現在の要素の名前を入れる変数
 var mobj = window.document.forms[0]; // マスターオブジェクト(当該フォームを指定)
 var n = mobj.elements.length - b; // 要素数からカウント対象外の数を削除
 for(i=0; n>i; i++){ // 全てのカウント対象要素をループ処理
   var obj = mobj.elements[i]; // [i]番目の要素
   n1 = obj.name; // 現在の要素の名前をn1に入れる
   if(n0 != n1){ // 保持名と現在名が違う(次の要素に処理が移った)ときは
     n0 = n1; // 現在名を保持する
     if(f == 0){ // フラグがゼロのまま(前の名前の要素グループにチェックが無かった)ときは
       alert("未チェック項目があります"); // アラート表示
       return false; // 処理中止
     }
     else{ // それ以外(次の要素に移ったけれど、前のグループにチェックがあった)ときは
       f = 0; // フラグをゼロに戻す
     }
   }
   if(obj.checked){ // チェックされていたら
     f = 1; // フラグを1にする
     c += obj.value - 0; // チェックされた要素の値を加算
     // ゼロを引くのは、数値計算を示すためのオマジナイ
   }
 }
 mobj.yes_count.value = c; // カウントの合計値を入れる
}
//-->
</script>
<form>
5:<input type="radio" name="q1" value="5"> | 4:<input type="radio" name="q1" value="4"> | 3:<input type="radio" name="q1" value="3"> | 2:<input type="radio" name="q1" value="2"> | 1:<input type="radio" name="q1" value="1"> | 0:<input type="radio" name="q1" value="0"><br>
5:<input type="radio" name="q2" value="5"> | 4:<input type="radio" name="q2" value="4"> | 3:<input type="radio" name="q2" value="3"> | 2:<input type="radio" name="q2" value="2"> | 1:<input type="radio" name="q2" value="1"> | 0:<input type="radio" name="q2" value="0"><br>
5:<input type="radio" name="q3" value="5"> | 4:<input type="radio" name="q3" value="4"> | 3:<input type="radio" name="q3" value="3"> | 2:<input type="radio" name="q3" value="2"> | 1:<input type="radio" name="q3" value="1"> | 0:<input type="radio" name="q3" value="0"><br>
5:<input type="radio" name="q4" value="5"> | 4:<input type="radio" name="q4" value="4"> | 3:<input type="radio" name="q4" value="3"> | 2:<input type="radio" name="q4" value="2"> | 1:<input type="radio" name="q4" value="1"> | 0:<input type="radio" name="q4" value="0"><br>
5:<input type="radio" name="q5" value="5"> | 4:<input type="radio" name="q5" value="4"> | 3:<input type="radio" name="q5" value="3"> | 2:<input type="radio" name="q5" value="2"> | 1:<input type="radio" name="q5" value="1"> | 0:<input type="radio" name="q5" value="0"><br>
<input type="text" name="yes_count" size="4"><input type="button" onClick="javascript:h();" value="count">
</form>


6:[回答] YYY [2003/02/19 14:32 ]

ごだっちさんのご親切な対応に感謝!

解説を見ながら自分なりにカスタマイズしてみます。

壁にぶち当たるとこちらで質問してるかも。
その時は宜しくお願いします。


7:[回答] ごだっち [MAIL] [2003/02/19 14:48 ]

あ、不具合があることに気が付きました。ちょっと訂正が入ります。

上記のスクリプトのままだと、最後の名前グループ(q5)にはチェックが付いていなくても通ってしまう...。

なので、var b=2; の部分を var b=1; にするか、
または、var n = mobj.elements.length - b; の部分を
    var n = mobj.elements.length - b + 1; にするなどの
何らかの方法で、最後の名前グループの最後の要素から、もう一つ次の要素(サンプルだと表示用のセル)までを、forループに含める必要がありました。


8:[回答] YYY [2003/02/20 09:39 ]

複数チェックの場合とチェック漏れ対応ですね。

>6のような形だとJavaScriptの組み立て方とか
処理の仕方を理解できそうなので助かります。
ネット上のリファレンスもこれぐらいわかりやすければ・・・

さっそく実装してみます。
重ね重ね、ごだっちさんには感謝です。


9:[質問] YYY [2003/02/20 10:56 ]

問題発生・・・

上記ソースをそのまま使用すると問題なく動作するのですが
FORM部分をTABLEでレイアウトして使用すると
全ての項目にチェックを入れてもアラートが表示されてしまいます。

使用予定のソースは以下の通りです。

           <FORM>
           <TABLE border="0" width="540" cellpadding="0" cellspacing="0">
             <TBODY>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD width="410" class="check-01"><TT>A.</TT>***</TD>
                 <TD width="130" align="right"><INPUT type="radio" name="q1" value="2">YES<INPUT type="radio" name="q1" value="0">NO<INPUT type="radio" name="q1" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>B.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q2" value="2">YES<INPUT type="radio" name="q2" value="0">NO<INPUT type="radio" name="q2" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>C.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q3" value="2">YES<INPUT type="radio" name="q3" value="0">NO<INPUT type="radio" name="q3" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>D.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q4" value="2">YES<INPUT type="radio" name="q4" value="0">NO<INPUT type="radio" name="q4" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>E.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q5" value="2">YES<INPUT type="radio" name="q5" value="0">NO<INPUT type="radio" name="q5" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>F.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q6" value="2">YES<INPUT type="radio" name="q6" value="0">NO<INPUT type="radio" name="q6" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>G.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q7" value="2">YES<INPUT type="radio" name="q7" value="0">NO<INPUT type="radio" name="q7" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>H.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q8" value="2">YES<INPUT type="radio" name="q8" value="0">NO<INPUT type="radio" name="q8" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>I.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q9" value="2">YES<INPUT type="radio" name="q9" value="0">NO<INPUT type="radio" name="q9" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>J.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q10" value="2">YES<INPUT type="radio" name="10" value="0">NO<INPUT type="radio" name="q10" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>K.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q11" value="2">YES<INPUT type="radio" name="q11" value="0">NO<INPUT type="radio" name="q11" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>L.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q12" value="2">YES<INPUT type="radio" name="q12" value="0">NO<INPUT type="radio" name="q12" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>M.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q13" value="2">YES<INPUT type="radio" name="q13" value="0">NO<INPUT type="radio" name="q13" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>N.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q14" value="2">YES<INPUT type="radio" name="q14" value="0">NO<INPUT type="radio" name="q14" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>O.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q15" value="2">YES<INPUT type="radio" name="q15" value="0">NO<INPUT type="radio" name="q15" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>P.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q16" value="2">YES<INPUT type="radio" name="q16" value="0">NO<INPUT type="radio" name="q16" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>Q.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q17" value="2">YES<INPUT type="radio" name="q17" value="0">NO<INPUT type="radio" name="q17" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>R.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q18" value="2">YES<INPUT type="radio" name="q18" value="0">NO<INPUT type="radio" name="q18" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>S.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q19" value="2">YES<INPUT type="radio" name="q19" value="0">NO<INPUT type="radio" name="q19" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD class="check-01"><TT>T.</TT>***</TD>
                 <TD class="check-01" align="right"><INPUT type="radio" name="q20" value="2">YES<INPUT type="radio" name="q20" value="0">NO<INPUT type="radio" name="q20" value="1">?</TD>
               </TR>
               <TR>
                 <TD colspan="2" height="10" background="img/line_02.gif"></TD>
               </TR>
               <TR>
                 <TD></TD>
                 <TD align="right" class="check-01"><INPUT type="button" name="submit" value="判定" onClick="javascript:Hantei()"><INPUT size="6" type="text" name="yes_count">点</TD>
               </TR>
               </TBODY>
           </TABLE>
           </FORM>


10:[回答] YYY [2003/02/20 11:04 ]

エラーの原因がわかりました。
どうやら質問項目が2桁になるとエラーが出るようです。
つまりラジオボタンのNAMEがq10からエラーが出るようです。
が対処の方法がよくわかりません。
NAMEの付け方を工夫して対処してみます。


11:[完了] YYY [2003/02/20 11:10 ]

すみません・・・
凡ミスでした。
q10のNAMEをつけ間違えてました。

結局ごだっちさんにおんぶにだっこで・・・


いずれこの掲示板で回答を示せる程度に
勉強しようと思います。

ありがとうございました。

回答(必須): 状態:

お名前(必須):

e-mail:

URL:




[戻る]

ChaichanPAPA's World