前提・実現したいこと
Ruby(RubyonRails)でTwitterクローンアプリを作成中です。
ツイート一覧をグリッドリストで表示しているのですが、縦三点リーダを押下したときに編集と削除というリンクが出てきて、それぞれのアクションを行えるようにしたいと考えております。
ボタン押下時のアクションなので、visibilityがhiddenの場合とvisibleの場合とでリンクを見せたり消したりしたいと考えています。
参考にしていた記事はこちらのボタン2のコードです。
発生している問題・エラーメッセージ
検証ツールのconsoleを開き、縦三点リーダをクリックしたところ、下記のエラーメッセージが出ました。
ChromeConsole
1Uncaught ReferenceError: verticalThreeReader is not defined at HTMLButtonElement.onclick
該当のソースコード
HTML
1<div class="more-wrapper"> 2 <button class="project-btn-more" onclick="verticalThreeReader()"> 3 <svg xmlns="http://www.w3.org/2000/svg " width="24 " height="24 " viewBox="0 0 24 24 " fill="none " stroke="currentColor " stroke-width="2 " stroke-linecap="round " stroke-linejoin="round " class="feather feather-more-vertical "> 4 <circle cx="12 " cy="12 " r="1 " /> 5 <circle cx="12 " cy="5 " r="1 " /> 6 <circle cx="12 " cy="19 " r="1 " /> 7 </svg> 8<!--縦三点リーダ--> 9 <div class="vertical-three-reader"> 10 <ul> 11 <li><%= link_to "edit", edit_post_path(post.id) %></li> 12 <li><%= link_to "delete", post_path(post.id), method: :delete %></li> 13 </ul> 14 </div> 15 </button> 16</div>
JavaScript
1document.addEventListener('DOMContentLoaded', function() { 2 3//縦三点リーダの上には別の記述がありますが、本題と関係ないので割愛しております。 4 5document.querySelector(".vertical-three-reader").style.visibility ="hidden"; 6 7 function verticalThreeReader(){ 8 const verticalThreeReader = document.querySelector(".vertical-three-reader"); 9 10 if(verticalThreeReader.style.visibility=="visible"){ 11 // hiddenで非表示 12 verticalThreeReader.style.visibility ="hidden"; 13 }else{ 14 // visibleで表示 15 verticalThreeReader.style.visibility ="visible"; 16 } 17} 18 19 20});
試したこと
エラー文で検索をしたところ、関数の定義が間違っているのだとはわかりました。
button class="more-wrapper"の部分が関与しているのかと思い、消してみましたがレイアウトが崩れただけで特にエラーの解決には至りませんでした。
<button class="project-btn-more" onclick="verticalThreeReader()"> の部分でエラーが起きていることはわかります。
ご回答いただければ幸いです。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/12 08:02
退会済みユーザー
2021/10/13 15:48 編集
2021/10/12 08:11