CSS（表示・非表示）を切り替える方法

0   名前： まちゃ ： 2007/09/08（土） 18:16  ID:2rIE424m sub-Kt
問題があって、解答はラジオボタンで選択します。あらかじめCSSで「正解」「不正解」を作成したので、正解（value=1）だったら「正解」を、不正解（value=0）だったら「不正解」を表示するようにしたいのですが、javascriptの書き方がわかりません。本にはgetElementByClassを使用とありましたが、どなたか詳しく教えてください。よろしくお願いいたします。

<SCRIPT language="JavaScript">
<!--
function Getscore() {
var score = 0;
for(i=0;i<4;i++){
if(document.form1.elements[i].checked){
score += parseInt(document.form1.elements[i].value);
}
}
window.alert(" あなたの点数は " + score + " 点です");}
// -->
</SCRIPT>
<STYLE TYPE="text/css">
<!--
.seikai {visibility:hidden;}
.huseikai {visibility:hidden;}
-->
</STYLE>

</HEAD>
<BODY>
<FORM name="form1">
<TABLE border="0" bgcolor="#009999" cellpadding="4">
<TBODY>
<TR>
<TD bgcolor="#ffffff" width="142"><FONT color="#000000" size="2">Ｑ１　日本一の山は？</FONT></TD>
<TD bgcolor="#ffffff" width="187"><FONT color="#000000" size="2"><INPUT type="radio" name="q1" value="1">富士山　<INPUT type="radio" name="q1" value="0">三笠山</FONT></TD>
<TD bgcolor="#ffffff" width="50" align="center">
<P class="seikai"><B><FONT color="#0000ff" size="2">正解</FONT></B></p>
</TD>
<TD bgcolor="#ffffff" width="50" align="center">
<P class="huseikai"><FONT color="#cc0000"><B><FONT color="#ff0000" size="2">不正解</FONT></B></FONT></P>
</TD>
</TR>
<TR>
<TD bgcolor="#ffffff" width="142"><FONT color="#000000" size="2">Ｑ２　世界一の山は？</FONT></TD>
<TD bgcolor="#ffffff" width="187"><FONT color="#000000" size="2"><INPUT type="radio" name="q2" value="0">キリマンジャロ　<INPUT type="radio" name="q2" value="1">エベレスト</FONT></TD>
<TD bgcolor="#ffffff" width="50" align="center"><P class="seikai"><B><FONT color="#0000ff" size="2">正解</FONT></B></TD>
<TD bgcolor="#ffffff" width="50" align="center">
<P class="huseikai"><FONT color="#cc0000"><B><FONT color="#ff0000" size="2">不正解</FONT></B></FONT></P>
</TD>
</TR>
</TBODY>
</TABLE>
<FONT color="#000000" size="2"><INPUT type="button" value="　採 点　" onclick="Getscore()"></FONT></FORM>
1   名前： mono ◆7YMtX/NYmu ： 2007/09/08（土） 18:16  ID:H.4H6VYQ sub-Cl
http://www.tagindex.com/bbs/note.html#h202
より引用
>質問用の掲示板内では、複数のスレッドを同時進行させないでください。（新規のスレッドを作成する場合は、以前に立てたスレッドを必ず終了させてください）
>※別のカテゴリーに移動する場合は、同時進行しないようにご注意ください。

進行中ですよね。
http://www.tagindex.com/cgi-lib/q4bbs/patio.cgi?mode=view&no=1350
2   名前： 匿名 ： 2007/09/08（土） 18:16  ID:epW2eUw6 sub-8t
>>1
ここが解決すれば終わるのではないのでしょうか。
そもそもそこの1のことなのだから、同じスレッドで続けてもよかったような気がします。

>>0
getElementByClassを使うのですね。
function getElementByClass(className) {
    className = ' ' + className + ' ';
    var all = document.getElementsByTagName('*');
    var elements = new Array();
    for (var i = 0; i < all.length; i++) {
        if (0 <= (' ' + all[i].className + ' ').indexOf(className)) {
            elements[elements.length] = all[i];
        }
    }
    return elements;
}

function Getscore() {
    var seikai = getElementByClass('seikai');
    var huseikai = getElementByClass('huseikai');
    var score = 0;
    for (var i = 0; i < 4; i++) {
        if (document.form1.elements[i].checked) {
            score += parseInt(document.form1.elements[i].value);
            var qn = Math.floor(i / 2);
            if (document.form1.elements[i].value == '0') {
                seikai[qn].style.visibility = 'hidden';
                huseikai[qn].style.visibility = 'visible';
            } else {
                seikai[qn].style.visibility = 'visible';
                huseikai[qn].style.visibility = 'hidden';
            }
        }
    }
    window.alert(" あなたの点数は " + score + " 点です");
}
3   名前： 匿名 ： 2007/09/08（土） 18:16  ID:k58nPpF. sub-Cz
Firefox2 と Opera9.5 は HTML5 の document.getElementsByClassName() が実装されてるはずだから、使えるならそれを使うのが高速かも。少なくとも、ループ中に全要素の数だけ毎回 length を取るのは IE がすさまじくトロいので、適当にスナップショットをとろう。

# 個人的には、getElements...() は live な NodeList を返すというイメージがあるので、static の Array を返すなら Selectors API の matchAll()/matchSingle() という名前でも拝借した方が良いと思う。StaticNodeList の実装は簡単だし。
http://www.w3.org/TR/selectors-api/
4   名前： 匿名 ： 2007/09/08（土） 18:16  ID:k58nPpF. sub-Cz
>>3
×Firefox2 → ○Firefox3
一覧へ戻る