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

Question

takanii

240

228もっと見る

500pt

ウェブ制作

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

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

回答の条件

1人5回まで

登録：2014/02/17 10:43:04
終了：2014/02/17 18:52:46

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

質問者から

takanii2014/02/17 11:11:50

<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 ){  // チェックの入っている項目の次のノードから先頭１文字を抜き出して答えに加える。
                            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>

規約違反として通知

takanii 2014/02/17 10:45:06

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 ){ // チェックの入っている項目の次のノードから先頭１文字を抜き出して答えに加える。
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>
うぃんど 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イベントを追加
takanii 2014/02/17 16:47:10

<input type="button" value="採点する" id="saiten">をテーブルタグの上部と下部２つ付けたいのですが
うまく動きません
何がいけないのでしょうか？
<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 ){ // チェックの入っている項目の次のノードから先頭１文字を抜き出して答えに加える。
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>

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

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

リクエスト送信済

回答リクエストを送信したユーザーはいません

うぃんど · Accepted Answer · 2014-02-17T11:28:00+09:00

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>

うぃんど · Accepted Answer · 2014-02-17T11:28:00+09:00

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>

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

質問者から

ベストアンサー

うぃんど262511492014/02/17 11:28:00

その他の回答（0件）

うぃんど262511492014/02/17 11:28:00ここでベストアンサー

コメント（3件)

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