人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

先ほど(http://q.hatena.ne.jp/1392566802)のjavascript質問の続きです
複数選択式の問題集サイトを作成しております
書いていただいたものをいじっているところなのですが
コードの中に input type="button"をもう1つ入れると動かなくなってしまいました
おそらくclassとかを入れれば動くと思うのですが どうすればいいのでしょうか?よろしくお願いします


●質問者: takanii
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 1/1件

▽最新の回答へ

質問者から
<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>

1 ● うぃんど
●500ポイント ベストアンサー

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.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ