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

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

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

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

Q&A

受付中

ファイル添付するとファイル名の右側にxボタンを表示したい

Kimsehwa
Kimsehwa

総合スコア312

Ruby on Rails

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

0回答

0グッド

0クリップ

285閲覧

投稿2021/03/05 04:33

編集2021/03/05 06:01

ファイル添付されてないと「添付されていません」を
添付されてればファイル名の右側にXボタンを表示したいです。

Xボタンは以下のように実装しました。

button.delete#del-button(style="display: none")

その後、ファイル添付(file-input)があったときにそのeventを拾ってdisplayのスタイルをinline-blockに変更すればうまくいくと思いましたが、うまく動いてくれません。

作成したコードは以下のとおりです。

slim

1 .field-body.flex 2 .field 3 .field-body 4 .field 5 .control 6 .file.has-name 7 label.file-label 8 //= file_field :fileupload, :file, class: "file-input" 9 input.file-input(type="file" name="upload_file") 10 span.file-cta 11 span.file-icon 12 i.fas.fa-upload 13 span.file-label 14 | ファイルを選択する 15 span.file-name 16 | 添付されていません 17 //button.delete#del_button 18 button.delete#del-button(style="display: none")

js

1javascript: 2 const delButton = document.getElementById("del-button") 3 console.log("delButton:",delButton); 4 5 document.querySelector('.file-input').addEventListener('change',function(e){ 6 var files = document.querySelector('.file-input').files; 7 if (files.length > 0) { 8 document.querySelector('.file-name').innerText = files[0].name; 9 delButton.style.display = "inline-block"; 10 //const delButton = document.getElementById("delbutton") 11 //const delButton = document.querySelector('.delete'); 12 console.log("xx", document.getElementById("del-button")) 13 console.log("delButton22:",delButton.style.display); 14 15 } 16 });

.file-inputのイベント配下からはdel-buttonのDOMに操作できないでしょうか?

なにかヒントになるキーワードでも良いので解決できる方法をご教示いただけますか。

よろしくお願いします。

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

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

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

下記のような質問は推奨されていません。

  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

m.ts10806

2021/03/05 05:08

changeイベントは想定のタイミングで発生しているのでしょうか
Kimsehwa

2021/03/05 05:59

添付ファイルがアップロードされたタイミングです

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.02%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Ruby on Rails

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

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。