発生している問題
外部Javascript内でdocument.getElementById
を使用しHTMLのIDを取得しようとするとUncaught TypeError: document.getElementById(...) is null
が発生します。
app/javascript/chk_waittime/index.js
document.getElementById('post_waittime').onclick = function(){
alert('index.js');
};
開発者ツールのコンソール画面
Uncaught TypeError: document.getElementById(...) is null
js index.js:1
Webpack 5
__webpack_require__
js
__webpack_require__
<anonymous>
<anonymous>
index.js:1
js index.js:1
Webpack 5
__webpack_require__
js
__webpack_require__
<匿名>
<匿名>
環境
- Ruby 2.6.3
- Rails 6.0.3
Javascriptの構成
app/javascript配下の構成
app % find javascript
javascript
javascript/packs
javascript/packs/application.js
javascript/chk_waittime
javascript/chk_waittime/index.js
javascript/channels
javascript/channels/index.js
javascript/channels/consumer.js
app/javascript/packs/application.js
require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")
require("chk_waittime")
import "bootstrap"
app/javascript/chk_waittime/index.js
document.getElementById('post_waittime').onclick = function(){
alert('index.js');
};
html.erbの構成
app/views/layouts/application.html.erb
<!DOCTYPE html>
<html>
<head>
<title><%= full_title(yield(:title)) %></title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
<%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>
<body>
<%= render 'layouts/header' %>
<% flash.each do |message_type, message| %>
<%= content_tag(:div, message, class: "alert alert-#{message_type}") %>
<% end %>
<%= yield %>
</body>
</html>
app/views/shops/index.html.erb
(省略)
<% if logged_in? %>
(省略)
<% else %>
<ol class="shops">
<% @shops.each do |shop| %>
<%= render partial: "shop_not_login", locals: {shop: shop} %>
<% end %>
</ol>
<% end %>
app/views/shops/_shop_not_login.html.erb
<li class="shops">
(省略)
<%= link_to "待ち時間を投稿する", "#", id:"post_waittime" %><br>
</li>
外部Javascriptが動作していることの確認
app/javascript/chk_waittime/index.js
alert('index.js');
ブラウザ
何卒よろしくお願いいたします。