RailsでのJavaScriptの使い方についてのご質問

現在、JavaScriptでモーダルウィンドウを作成中です。
Rails6.0にて、〜.jsという名前のファイルにJavaScriptを書いても、
JavaScriptが動かず、困っております。

ご回答頂けますと幸いです。

#困っていること
app/javascript/packs/application.jsにコードを書いても、JavaScriptが動きません。
下記のように記述をしております。

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.


require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery")

const modalBtn = document.getElementById('modalBtn')
const modal = document.getElementById('modal')

modalBtn.addEventListener('click', () => {
  modal.style.display = 'block';
})

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

#試したこと1
モーダルウィンドウを組み込みたいViewファイルに直接JavaScriptを書きました。
結果、JavaScriptは動いてくれました。(「投稿する」ボタンを押すと、モーダルウィンドウのパーツが現れる)

動いてくれるのですが、Viewファイルのコードがごちゃごちゃしてしまうので、
javascriptは〜.jsという名前のファイルに記述するべきなのではないかと考えています。

#views/microposts/index.html.erb

<% provide(:title, "メンバー募集") %>
<% if logged_in? %>
  <div class="form-wrapper">
      <div class="micropost content-wrapper">
        <h1>Wanted Member</h1><input type="button" id="modalBtn" value='投稿する'>
      </div>
      <div class="micropost-wrapper">
        <%= render 'shared/feed' %>
      </div>
  </div>
<% else %>
  <div class="micropost-wrapper">
    <%= render 'shared/feed' %>
  </div>
<% end %>

<div id="modal" class="modal">
  <div class="modal-content">
    <div class="modal-body">
      <section class="micropost_form">
        <%= render 'shared/micropost_form' %>
      </section>
    </div>
  </div>
</div>


<script type="text/javascript">
 
const modalBtn = document.getElementById('modalBtn')
const modal = document.getElementById('modal')

modalBtn.addEventListener('click', function() {
  modal.style.display = 'block';
})
</script>

#試したこと２
app/javascript/main.jsというファイルを作成し、そこにJavaScriptを書き込み、
app/javascript/packs/application.jsにて、app/javascript/main.jsをrequireしてみました。
（app/javascript/packs/application.jsに直接JavaScriptを書き込むべきではないと考えたため。）

この結果も、何も反応しないという形で終わりました。

#app/javascript/main.js

const modalBtn = document.getElementById('modalBtn')
const modal = document.getElementById('modal')

modalBtn.addEventListener('click', () => {
  modal.style.display = 'block';
})

// This file is automatically compiled by Webpack, along with any other files
// present in this directory. You're encouraged to place your actual application logic in
// a relevant structure within app/javascript and only use these pack files to reference
// that code so it'll be compiled.


require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

require("jquery")
require('../main.js)

// Uncomment to copy all static images under ../images to the output folder and reference
// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
// or the `imagePath` JavaScript helper below.
//
// const images = require.context('../images', true)
// const imagePath = (name) => images(name, true)

以上でございます。
〜.jsというファイルにJavaScriptを記述する場合、どのように記述すれば動くようになりますでしょうか。
恐れ入りますが、ご教示頂けますと幸いです。
よろしくおねがいいたします。

行動規範の内容に同意します

回答1件

コンソールにエラーは出ていませんか？

app/javascript/以下のJavaScriptは、一般に<head>内でセットしますが、<head>でJavaScriptを実効する段階ではまだ<body>が構築されていませんので、const modalBtn = document.getElementById('modalBtn')などは「何も見つからない」ということになり、正しく動作しません。

Turbolinksのある環境なので、turbolinks:loadのタイミングに仕掛けるイベントとしてコードを実行する必要があります。

投稿2021/03/12 00:13

maisumakun

総合スコア146849

gussan-me

2021/03/12 00:25

「試したこと1」の状態だと、下記のエラーがブラウザのconsoleで表示されておりました。 application.js:17 Uncaught TypeError: Cannot read property 'addEventListener' of null at Object../app/javascript/packs/application.js (application.js:17) at __webpack_require__ (bootstrap:19) at bootstrap:83 at bootstrap:83 まだ<body>が構築されていないとのことですが、どのように対応すればよろしいでしょうか。。。よろしくお願いいたします。

maisumakun

2021/03/12 00:27

> どのように対応すればよろしいでしょうか。。。それも元の回答に書いてあります。

gussan-me

2021/03/12 12:34

調べてturbolinks:loadというのを追加してみたのですが、反応しませんでした。よろしくお願いいたします。 const modalBtn = document.getElementById('modalBtn') const modal = document.getElementById('modal') modalBtn.addEventListener('turbolinks:load','click', () => { modal.style.display = 'block'; })

maisumakun

2021/03/12 13:20 編集

> 調べてturbolinks:loadというのを追加してみたのですが、反応しませんでした。 const modalBtn = document.getElementById('modalBtn')自体も、turbolinks:loadのタイミングで実行する必要があります。

行動規範の内容に同意します