javascriptでDOM要素の追加をしたいのですがうまくいきません。

Question

Railsの学習のためにゲームソフトのユーザーレビューサイトを制作しています。

環境は
Rails 5.2.4
Ruby 2.6.5
PostgreSQL
Docker Compose
です。

ゲームソフトのユーザーレビューサイトにて、ゲームソフトを一緒に遊ぶフレンドを募集できる機能を実装しようとしています。その機能の中で、フレンド募集の本文のheightが120px以上の場合にoverflow: hidden;を適用してはみ出した本文を隠しておいて、本文の右下に「全てを表示」というリンクを表示、そこをクリックするとモーダルで全ての文章が表示されるという風にしたいと思っています。
その機能を実装するために、本文を囲むdiv(クラス名はdescription_wrapper)のheightが120pxであれば「全てを表示」リンクを本文の下に追加するコードをJavaScriptで書いたのですがそれが上手く動作してくれません。
どこを修正すればいいかアドバイスをいただきたいです。
コードは以下の通りです。

_recruitment_html.erb(gamesコントローラーのshowアクションで表示されるページの中で呼ばれているパーシャルです)

<div class="card recruitment">
  <div class="card-body">
    <div class="recruitment_content clearfix">
      <%= link_to recruitment.user.name, recruitment.user, class: "user_name"%>
      <p class="card-title"><%= recruitment.title %></p>
      <div class="description_wrapper">
        <%= simple_format(recruitment.description, class: "description") %>
      </div>
    </div>
    <div class="review_manage">
      <% if current_user == recruitment.user %>
        <%= link_to "投稿を編集する", edit_recruitment_path(id: recruitment.id) %>
        <%= link_to "投稿を削除する", recruitment_path(id: recruitment.id), method: :delete, data: { confirm: "本当に削除しますか？" } %>
      <% end %>
    </div>
  </div>
  <!-- Modal -->
  <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="exampleModalLabel"><%= recruitment.title %></h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">
          <%= simple_format(recruitment.description) %>
        </div>
      </div>
    </div>
  </div>
</div>

show.js(gamesコントローラーのshowアクションで表示されるページに適用するjsのファイルです)

var descriptions = document.querySelectorAll("p.description");
document.querySelectorAll("div.description_wrapper").forEach((wrapper, index) => {
  if (wrapper.clientHeight > 120) {
    var modal_link = document.createElement("a");
    modal_link.textContent = "全てを表示";
    modal_link.className = "modal_link";
    modal_link.setAttribute('data-toggle', 'modal');
    modal_link.setAttribute('data-target', 'exampleModal');
    descriptions[index].parentNode.insertBefore(modal_link, descriptions[index].nextSibling); 
  }
});

よろしくお願いします。

Comments

[Cojiro]

> 上手く動作してくれません。
というのは、どういう状態ですか？

JSのエラーが出力されているならエラーを記載する。
エラーが出力されていないなら、スクリーンショット等を記載する。
それらの状況によっては、CSSを記載する必要もあるかもしれません。判断できないのであれば、記載する。

などされた方がいいと思います。

[sassan738]

コメントいただき有難うございます。説明不足ですみません。
質問の内容は自己解決しました。
次回以降はもっと詳細に説明文を記述しようと思います。

Answer 1

解決しました。
原因は同じページ内に複数表示されているdiv.description_wrapper のheightが120px以上の要素にだけリンクを追加したかったのですが、ブラウザで表示して確認するときにheightが120px以上になる要素を一つも作っていなかったことでした。要素の中身をたくさん記入して120px以上になるようにすれば無事に追加されました。