質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1007閲覧

縦三点リーダ押下時、複数リンクを表示したい

tomomomo

総合スコア22

Ruby on Rails 5

Ruby on Rails 5は、オープンソースのWebアプリケーションフレームワークです。「同じことを繰り返さない」というRailsの基本理念のもと、他のフレームワークより少ないコードで簡単に開発できるよう設計されています。

Ruby

Rubyはプログラミング言語のひとつで、オープンソース、オブジェクト指向のプログラミング開発に対応しています。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/10/12 07:00

前提・実現したいこと

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()"> の部分でエラーが起きていることはわかります。

ご回答いただければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

イメージ説明

投稿2021/10/12 07:39

編集2021/10/13 15:48
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomomomo

2021/10/12 08:02

ありがとうございます。 表示することができました。 保守的なことを考えれば、下に書いていただいた回答者様の言った通りに記述し直す必要があるのでしょうね。
退会済みユーザー

退会済みユーザー

2021/10/13 15:48 編集

.
tomomomo

2021/10/12 08:11

なるほどです。 javascriptの記述がほぼ初めてなので、いい機会だと思って記述し直してみます!
guest

0

属性でイベントハンドラを設定すると、グローバルスコープにあるものしか参照できないです。
その他、使わない方がいい理由がたくさんありますので、避けた方がいいです。

HTMLのonclick属性(クリックイベント)を使用してはダメな4つの理由 | iwb.jp

投稿2021/10/12 07:34

Lhankor_Mhy

総合スコア35869

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tomomomo

2021/10/12 08:01

ありがとうございます。勉強になりました。 addEventListnerを使用した方がいいとのことですが、全て書き換える必要があるということですよね。
Lhankor_Mhy

2021/10/12 08:40

そうですね、といってもそれほど大きな変更ではないです。 document.querySelector(".project-btn-more").addEventListener('click', verticalThreeReader); と書けばいいだけなので。
tomomomo

2021/10/12 12:26

タグを取ってくるだけではなく、クリックしたときの動作も付け加えればいいということですね! ありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問