- ベストアンサー
JavaScriptでボタンクリック時に要素を表示する方法
- JavaScriptを使用して、ボタンをクリックした際に特定の要素を表示する方法を知りたいです。
- 現在のソースコードでは思った通りに動作しないため、正しい考え方や記述方法について教えてください。
- 今後、問題や答えの数を増やしても動作するようにしたいです。
- 5467kaou
- お礼率80% (4/5)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
大雑把な考え方ははずれていないのかも知れませんが、実際の記述はかなり怪しいです。 ・いきなりelementという変数がありますが、定義されていないのでエラーになるはず ・aが文字列とすれば、bも文字列になりますが、次にb.style～としてもエラーになります。 ・flagを設定していますが、各項目別の処理で同じflagを参照しているのでおかしなことに？ などなど。 javascriptでは変数の型を特に定義しませんが、実際には変数内の値によって型が違いますので、その辺りをきちんと整理して考えないとおかしなことになります。 ＞今後問題や答えを増やしても動作するようにしたいと考えています。 全体の構成に規則性があるなら、その構造を利用して処理するようなスクリプトにしておくことで、数が増減してもスクリプトを変更する必要のないようにすることは可能です。 いきなり、少々複雑になってしまうかも知れませんが、そんな方法のひとつの例です。 他にも方法はいろいろあると思いますので、あくまでも一例としてご参考までに。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>sample</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> #QandA li { margin-top:1.5em; } #QandA p { margin:0.2em 0; } #QandA p.answer { display:none; } </style> <script type="text/javascript"> (function(id){ var handler = function(evt){ // イベント発生要素を取得 var t = evt.target || evt.srcElement; var e = t.parentNode; // 指定id内かを調査 while(e && e.id != id) e = e.parentNode; // 指定id内かつinput[type=button]をチェック if(!e || t.nodeName != "INPUT" || t.type != "button") return; // 次のP要素を取得 e = t.parentNode.nextSibling; while(e && e.nodeName != "P") e = e.nextSibling; // 要素にclass="answer"が設定されていれば、表示/非表示の処理 if(e && e.className.match(/(^| )answer( |$)/)) e.style.display = e.style.display=="block"?"none":"block"; } // ドキュメントにクリックイベントを設定 /*@cc_on@*/ document./*@if(1)attachEvent('on' + @else@*/addEventListener(/*@end@*/'click', handler, false); })( "QandA" // 対象リストのid ); </script> </head> <body> <ol id="QandA"> <li> <p class="question">問題1</p> <p><input type="button" value="ボタン(a)" accesskey="a"></p> <p class="answer">答え1</p> </li> <li> <p class="question">問題2</p> <p><input type="button" value="ボタン(b)" accesskey="b"></p> <p class="answer">答え2</p> </li> <li> <p class="question">問題3</p> <p><input type="button" value="ボタン(c)" accesskey="c"></p> <p class="answer">答え3</p> </li> </ol> </body> </html>
その他の回答 (1)
- b0a0a
- ベストアンサー率49% (156/313)
まず変数elementが定義されてません それから文字列bにスタイルを設定しようとしてます また１つのフラグで複数の物事を管理してはいけません あとどんなエラーがでているのかコンソールを確認すれば１発でわかりますよ onclick="hyouzi()" accesskey="a"/> ↓ onclick="hyouzi(this)" accesskey="a"/> <script> function hyouzi(btn){ var ansid = "ans" + btn.id.substr(2); var ans = document.getElementById(ansid); ans.style.display = ans.style.display=="block" ? "none" : "block"; } </script>
お礼
回答ありがとうございました。
お礼
とても助かりました。丁寧な解説も付けていただきありがとうございます。 基本的なことも深めていきたいと思います。