先日"HTML文書をJavaScriptで開閉させたい"という題に対して、いくつかの回答を頂きました。
回答を参考に色々なことを試しているのですが、その1つに、どうにも解決方法が分からないものがありましたので質問させて頂きます。
まずは以下のHTMLをご覧ください。
HTML
1<body> 2 <h1>メインタイトル</h1> 3 <section> 4 <div class="section_head"> 5 <h2>サブタイトル1</h2> 6 <p>サブタイトル1についての備考</p> 7 </div> 8 <div class="section_body"> 9 <p>サブタイトル1に関する説明</p> 10 : 11 : 12 : 13 <p>サブタイトル1に関する説明</p> 14 </div> 15 </section> 16 <section> 17 <div class="section_head"> 18 <h2>サブタイトル2</h2> 19 <p>サブタイトル2についての備考</p> 20 </div> 21 <div class="section_body"> 22 <p>サブタイトル2に関する説明</p> 23 : 24 : 25 : 26 <p>サブタイトル2に関する説明</p> 27 </div> 28 </section> 29</body>
やりたい事としては以下の通りです。
- JavaScriptが動く環境ならばページ読み込み時に<div class="section_body">タグを非表示にする
- <div class="section_head">タグをクリックする度に<div class="section_body">タグが表示状態と非表示状態を繰り返す
そのために以下のようなJavaScriptを書いたのですがaddEventListener処理部分がエラーで動きません。
これが<div class="section_body">タグを非表示にするところからエラーなら「多分、配列関連のことをちゃんと理解してないから動かないんだろうなぁ」と思えるのですが、そこだけは正常に処理されているために尚のこと原因が掴めずにいます。
とりあえずJavaScript入門書片手に、forEachとかdocument.querySelectorAllですとか片っ端から色々試してはいるのですが全く解決する気配がありません。
直接の解決方法もそうですが、そもそも、どこか、どのように間違っているのかすら分かっていない状態です。
長くなりましたが、ご回答のほう、よろしくお願い申し上げます。
JavaScript
1onload = () => { 2 let i; 3 let section_head = document.getElementsByClassName("section_head"); 4 let section_body = document.getElementsByClassName("section_body"); 5 section_head = Array.from(section_head); 6 section_body = Array.from(section_body); 7 //<div class="section_body">を非表示に 8 for(i = 0; i < section_body.length; i++){ 9 section_body[i].style.display = "none"; 10 } 11 //クリックする度開閉 12 for(i = 0; i < section_head.length; i++){ 13 section_head[i].addEventListener("click", () => { 14 if(section_body[i].style.display === "none"){ 15 section_body[i].style.display = "flex"; 16 }else{ 17 section_body[i].style.display = "none"; 18 } 19 }); 20 } 21}
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/17 09:49