日記をHTMLで書いています。
HTMLとCSSを勉強して見やすくすることができたのですが、内容が多くなってきたために各日付ごとに開閉させたいと考えています。
完成像としてはスマートフォン版Wikipediaのように開閉できる感じを考えています。
そこで色々と試してみて思った通りに動くようになったのですが、もう少し綺麗(?)に書きたいなと考えております。
以下にHTMLとJavaScriptのコードを挿入します。
当初は、このような感じでした。
HTML
1<body> 2 <h2 id="s0_head">2019/01/01</h2> 3 <p id="s0_body">いろはにほへと</p> 4 <h2 id="s1_head">2019/01/02</h2> 5 <p id="s1_body">ちりぬるを</p> 6</body>
JavaScript
1const s0_head = document.getElementById("s0_head"); 2const s0_body = document.getElementById("s0_body"); 3const s1_head = document.getElementById("s1_head"); 4const s1_body = document.getElementById("s1_body"); 5let s0 = 0; 6let s1 = 0; 7s0_head.addEventListener("click", ()=>{ 8 if(s0 == 0){ 9 s0_body.style.display = "flex"; 10 s0 = 1; 11 }else{ 12 s0_body.style.display = "none"; 13 s0 = 0; 14 } 15}); 16s1_head.addEventListener("click", ()=>{ 17 if(s1 == 0){ 18 s1_body.style.display = "flex"; 19 s1 = 1; 20 }else{ 21 s1_body.style.display = "none"; 22 s1 = 0; 23 } 24});
JavaScriptに配列というものがあると知って以下のようにしました。
これが今の状態となります。
HTML
1<body> 2 <h2 class="s_head">2019/01/01</h2> 3 <p class="s_body">いろはにほへと</p> 4 <h2 class="s_head">2019/01/02</h2> 5 <p class="s_body">ちりぬるを</p> 6</body>
JavaScript
1const s_head = document.getElementsByClassName("s_head"); 2const s_body = document.getElementsByClassName("s_body"); 3let s = [0, 0]; 4s_head[0].addEventListener("click", ()=>{ 5 if(s[0] == 0){ 6 s_body[0].style.display = "flex"; 7 s[0] = 1; 8 }else{ 9 s_body[0].style.display = "none"; 10 s[0] = 0; 11 } 12}); 13s_head[1].addEventListener("click", ()=>{ 14 if(s[1] == 0){ 15 s_body[1].style.display = "flex"; 16 s[1] = 1; 17 }else{ 18 s_body[1].style.display = "none"; 19 s[1] = 0; 20 } 21});
この状態から繰り返している処理をまとめたいのですが失敗が続いています。
正規表現を使って、**s_head[/*/].addEventListener()...**のようにしてみたり、for文を使って、**for(i = 0; i < s_head.length; i++){s_head[i].addEventListener()...}**としてみたり、forEach文というものを試してみたりしたのですが、いずれもエラーが出て動かない状態です。
色々と調べてみたのですが配列を使ってメニューを作るといった旨の記事が見当たらないので、もしかして、そもそもこういった作り方は根本的に間違っているのではないかと考えています。
最後になりますが質問は2点です。
- 配列を使ってメニューをまとめたいのですが、どのようにすればよいでしょうか?
- そもそも配列を使ってメニューを作るのは不適切なのでしょうか?
長文となりましたが、ご回答お待ちしております。
よろしくお願いします。
回答3件
あなたの回答
tips
プレビュー