先ほど(http://q.hatena.ne.jp/1392566802)のjavascript質問の続きです

複数選択式の問題集サイトを作成しております
書いていただいたものをいじっているところなのですが
コードの中に input type="button"をもう1つ入れると動かなくなってしまいました
おそらくclassとかを入れれば動くと思うのですが どうすればいいのでしょうか?よろしくお願いします

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/02/17 10:43:04
  • 終了:2014/02/17 18:52:46
id:takanii
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type='text/javascript'>
        window.onload = function(){ // onLoadイベントで動作させる

            var e = document.getElementsByTagName("input"); // インプット要素取得
            e.item( e.length - 1 ).onclick = function(){ // 最後のインプット要素にonClickイベントを追加

                for( var t = document.getElementsByTagName("table")[0], k = 0; k < t.rows.length ; ++k ){ // 最初のテーブルを対象として行数分ループ
                    var a = ""; // 答えのクリア
                    for( var c = t.rows[k].cells[1].childNodes, i = 0; i < c.length; ++i ){ // 子要素の数だけループ
                        if( c[i].checked == 1 ){  // チェックの入っている項目の次のノードから先頭1文字を抜き出して答えに加える。
                            a += c[++i].nodeValue.charAt(0);
                        }
                   }
                    t.rows[k].cells[0].getElementsByTagName("input")[0].checked = a != t.rows[k].cells[2].innerHTML ? 1 : 0; // 答え合わせ
                }
            }
        }
    </script>
</head>
<body>

    <table>
        <tr>
            <td>第1問<input type="checkbox"></td>
            <td>赤いものはどれか すべて選べ<br>
                <input type="checkbox">a りんご<br>
                <input type="checkbox">b みかん<br>
                <input type="checkbox">c バナナ<br>
                <input type="checkbox">d グレープフルーツ<br>
                <input type="checkbox">e 雪
            </td>
            <td>a</td>
        </tr>
        <tr>
            <td>第2問<input type="checkbox"></td>
            <td>赤いものはどれか すべて選べ<br>
                <input type="checkbox">a りんご<br>
                <input type="checkbox">b 赤信号<br>
                <input type="checkbox">c いちご<br>
                <input type="checkbox">d グレープフルーツ<br>
                <input type="checkbox">e 雪
            </td>
            <td>abc</td>
        </tr>
    </table>
    <input type="button" value="採点する"><input type="button" value="シャッフル">

</body>
</html>

ベストアンサー

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492014/02/17 11:28:00

ポイント500pt

id や class を用いてセレクトを容易とし、
checkbox に value を用いることでデータの取り扱いも改良した例。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type='text/javascript'>
        window.onload = function(){ // onLoadイベントで動作させる

            document.getElementById("answer_check").onclick = function(){ // answer_checkにonClickイベントを追加

                for( var t = document.getElementById("quiz").getElementsByTagName("tr"), k = 0; k < t.length ; ++k ){ // quizテーブルのtrを順に処理
                    if( t[k].className == "quiz" ){ // quizクラスのtrだけを処理
                        var a = ""; // 答えのクリア
                        for( var c = t[k].getElementsByTagName("td")[1].getElementsByTagName("input"), i = 0; i < c.length; ++i ){ // tdの数だけループ
                            if( c[i].checked == 1 ){  // チェックの入っている項目のvalueを加える
                                a += c[i].value;
                            }
                        }
                        t[k].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked = a != t[k].getElementsByTagName("td")[2].innerHTML ? 1 : 0; // 答え合わせ
                   }
                }

            }
        }
    </script>
</head>
<body>

    <table id="quiz">
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </thead>
        <tbody>
            <tr class="quiz">
                <td>第1問<input type="checkbox" disabled></td>
                <td>赤いものはどれか すべて選べ<br>
                    <input type="checkbox" value="a">a りんご<br>
                    <input type="checkbox" value="b">b みかん<br>
                    <input type="checkbox" value="c">c バナナ<br>
                    <input type="checkbox" value="d">d グレープフルーツ<br>
                    <input type="checkbox" value="e">e 雪
                </td>
                <td>a</td>
            </tr>
            <tr class="quiz">
                <td>第2問<input type="checkbox" disabled></td>
                <td>赤いものはどれか すべて選べ<br>
                    <input type="checkbox" value="a">a りんご<br>
                    <input type="checkbox" value="b">b 赤信号<br>
                    <input type="checkbox" value="c">c いちご<br>
                    <input type="checkbox" value="d">d グレープフルーツ<br>
                    <input type="checkbox" value="e">e 雪
                </td>
                <td>abc</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="採点する" id="answer_check">
    <input type="button" value="シャッフル" id="answer_shuffle">

</body>
</html>

その他の回答(0件)

id:windofjuly No.1

うぃんど回答回数2625ベストアンサー獲得回数11492014/02/17 11:28:00ここでベストアンサー

ポイント500pt

id や class を用いてセレクトを容易とし、
checkbox に value を用いることでデータの取り扱いも改良した例。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type='text/javascript'>
        window.onload = function(){ // onLoadイベントで動作させる

            document.getElementById("answer_check").onclick = function(){ // answer_checkにonClickイベントを追加

                for( var t = document.getElementById("quiz").getElementsByTagName("tr"), k = 0; k < t.length ; ++k ){ // quizテーブルのtrを順に処理
                    if( t[k].className == "quiz" ){ // quizクラスのtrだけを処理
                        var a = ""; // 答えのクリア
                        for( var c = t[k].getElementsByTagName("td")[1].getElementsByTagName("input"), i = 0; i < c.length; ++i ){ // tdの数だけループ
                            if( c[i].checked == 1 ){  // チェックの入っている項目のvalueを加える
                                a += c[i].value;
                            }
                        }
                        t[k].getElementsByTagName("td")[0].getElementsByTagName("input")[0].checked = a != t[k].getElementsByTagName("td")[2].innerHTML ? 1 : 0; // 答え合わせ
                   }
                }

            }
        }
    </script>
</head>
<body>

    <table id="quiz">
        <thead>
            <tr>
                <th>1</th>
                <th>2</th>
                <th>3</th>
            </tr>
        </thead>
        <tbody>
            <tr class="quiz">
                <td>第1問<input type="checkbox" disabled></td>
                <td>赤いものはどれか すべて選べ<br>
                    <input type="checkbox" value="a">a りんご<br>
                    <input type="checkbox" value="b">b みかん<br>
                    <input type="checkbox" value="c">c バナナ<br>
                    <input type="checkbox" value="d">d グレープフルーツ<br>
                    <input type="checkbox" value="e">e 雪
                </td>
                <td>a</td>
            </tr>
            <tr class="quiz">
                <td>第2問<input type="checkbox" disabled></td>
                <td>赤いものはどれか すべて選べ<br>
                    <input type="checkbox" value="a">a りんご<br>
                    <input type="checkbox" value="b">b 赤信号<br>
                    <input type="checkbox" value="c">c いちご<br>
                    <input type="checkbox" value="d">d グレープフルーツ<br>
                    <input type="checkbox" value="e">e 雪
                </td>
                <td>abc</td>
            </tr>
        </tbody>
    </table>
    <input type="button" value="採点する" id="answer_check">
    <input type="button" value="シャッフル" id="answer_shuffle">

</body>
</html>
  • id:takanii
    idをつけてやってみましたがダメでした
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type='text/javascript'>
    window.onload = function(){ // onLoadイベントで動作させる

    var e = document.getElementById("saiten"); // インプット要素取得
    e.item( e.length - 1 ).onclick = function(){ // 最後のインプット要素にonClickイベントを追加

    for( var t = document.getElementsByTagName("table")[0], k = 0; k < t.rows.length ; ++k ){ // 最初のテーブルを対象として行数分ループ
    var a = ""; // 答えのクリア
    for( var c = t.rows[k].cells[1].childNodes, i = 0; i < c.length; ++i ){ // 子要素の数だけループ
    if( c[i].checked == 1 ){ // チェックの入っている項目の次のノードから先頭1文字を抜き出して答えに加える。
    a += c[++i].nodeValue.charAt(0);
    }
      }
    t.rows[k].cells[0].getElementById("saiten")[0].checked = a != t.rows[k].cells[2].innerHTML ? 1 : 0; // 答え合わせ
    }
    }
    }
    </script>
    </head>
    <body>

    <table>
    <tr>
    <td>第1問<input type="checkbox"></td>
    <td>赤いものはどれか すべて選べ<br>
    <input type="checkbox">a りんご<br>
    <input type="checkbox">b みかん<br>
    <input type="checkbox">c バナナ<br>
    <input type="checkbox">d グレープフルーツ<br>
    <input type="checkbox">e 雪
    </td>
    <td>a</td>
    </tr>
    <tr>
    <td>第2問<input type="checkbox"></td>
    <td>赤いものはどれか すべて選べ<br>
    <input type="checkbox">a りんご<br>
    <input type="checkbox">b 赤信号<br>
    <input type="checkbox">c いちご<br>
    <input type="checkbox">d グレープフルーツ<br>
    <input type="checkbox">e 雪
    </td>
    <td>abc</td>
    </tr>
    </table>
    <input type="button" value="採点する" id="saiten"><input type="button" value="シャッフル" class="shuffle">

    </body>
    </html>
  • id:windofjuly
    うぃんど 2014/02/17 12:12:49
    id="saiten"の追加対応だけでよければ下記の変更のみ。

    var e = document.getElementsByTagName("input"); // インプット要素取得
    e.item( e.length - 1 ).onclick = function(){ // 最後のインプット要素にonClickイベントを追加

    document.getElementById("saiten").onclick = function(){ // saitenにonClickイベントを追加
  • id:takanii
    <input type="button" value="採点する" id="saiten">をテーブルタグの上部と下部2つ付けたいのですが
    うまく動きません
    何がいけないのでしょうか?
    <html>
    <head>
    <script type='text/javascript'>
    window.onload = function(){ // onLoadイベントで動作させる

    document.getElementById("saiten1").onclick = function(){
    document.getElementById("saiten2").onclick = function(){
    for( var t = document.getElementsByTagName("table")[0].getElementsByTagName("tbody")[0], k = 0; k < t.rows.length ; ++k ){ // 最初のテーブルを対象として行数分ループ
    var a = ""; // 答えのクリア
    for( var c = t.rows[k].cells[1].childNodes, i = 0; i < c.length; ++i ){ // 子要素の数だけループ
    if( c[i].checked == 1 ){ // チェックの入っている項目の次のノードから先頭1文字を抜き出して答えに加える。
    a += c[++i].nodeValue.charAt(0);
    }
      }
    t.rows[k].cells[0].getElementsByTagName("input")[0].checked = a != t.rows[k].cells[2].innerHTML ? 1 : 0; // 答え合わせ
    }
    }
    }
    </script>
    </head>
    <body>
    <input type="button" id="saiten1" value="採点する">
    <table>
    <tr>
    <td>第1問<input type="checkbox"></td>
    <td>赤いものはどれか すべて選べ<br>
    <input type="checkbox">a りんご<br>
    <input type="checkbox">b みかん<br>
    <input type="checkbox">c バナナ<br>
    <input type="checkbox">d グレープフルーツ<br>
    <input type="checkbox">e 雪
    </td>
    <td>a</td>
    </tr>
    <tr>
    <td>第2問<input type="checkbox"></td>
    <td>赤いものはどれか すべて選べ<br>
    <input type="checkbox">a りんご<br>
    <input type="checkbox">b 赤信号<br>
    <input type="checkbox">c いちご<br>
    <input type="checkbox">d グレープフルーツ<br>
    <input type="checkbox">e 雪
    </td>
    <td>abc</td>
    </tr>
    </table>
    <input type="button" id="saiten2" value="採点する">

    </body>
    </html>

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません