🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby

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

Ruby on Rails 6

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

HTML5

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

JavaScript

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

Q&A

解決済

2回答

5055閲覧

モーダル機能実装時、Uncaught TypeErrorがconsoleで出ることで苦しんでます

koukinagano

総合スコア1

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

Ruby

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

Ruby on Rails 6

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

HTML5

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

JavaScript

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

0グッド

0クリップ

投稿2021/02/04 06:33

編集2021/02/04 06:57

前提・実現したいこと

モーダル機能の実装途中に出たエラーです。
Google Chromeの検証ツールのconsoleで下記のエラーが出ています。

発生している問題・エラーメッセージ

console

1modal.js:1 Uncaught TypeError: Cannot read property 'addEventListener' of null 2 at Object../app/javascript/packs/modal.js (modal.js:1) 3 at __webpack_require__ (bootstrap:19) 4 at Object../app/javascript/packs/application.js (application.js:10) 5 at __webpack_require__ (bootstrap:19) 6 at bootstrap:83 7 at bootstrap:83

該当のソースコード

modalhtmlerb

1<main> 2 3 <h1>お問い合わせ</h1> 4 <a id="modalOpen" class= "modalOpen">問合せ</a> 5 6 <div class="modal" id="modal"> 7 <h2>お問い合わせ</h2> 8 <div class="modalContents"> 9 fadfaafdajknknkjkada<br> 10 dfgandfsksakfdnvkajn<br> 11 fadfaafdajknknkjkada<br> 12 dfgandfsksakfdnvkajn<br> 13 </div> 14 <a id="modalClose" class= "modalClose">閉じる</a> 15 </div> 16 17 <div class="mask" id="mask"></div> 18 19</main> 20

modalscss

1main { 2 background-color: rgb(219, 215, 215); 3 padding: 20px; 4 border-radius: 5px; 5 max-width: 1000px; 6 margin: 50px auto; 7 height: 200vh; 8} 9 10h1 { 11 font-size: 30px; 12 font-weight: bold; 13 margin-bottom: 30px; 14} 15 16.modalOpen, .modalClose { 17 display: flex; 18 align-items: center; 19 justify-content: center; 20 width: 200px; 21 height: 40px; 22 background-color: blue; 23 color: white; 24 font-size: 16px; 25 border-radius: 5px; 26 text-decoration: none; 27 cursor: pointer; 28} 29 30.modalClose { 31 margin: 30px auto 0; 32} 33 34.modal { 35 position: fixed; 36 top: 50%; 37 left: 50%; 38 transform: translate(-50%,-50%); 39 background-color: rgb(245, 243, 243); 40 padding: 20px; 41 border-radius:5px; 42 min-width: 500px; 43 z-index: 2; 44 opacity:0; 45 visibility: hidden; 46} 47 48.modal h2 { 49 font-weight: bold; 50 font-size: 20px; 51 margin-bottom: 10px; 52} 53 54.modalContents { 55 line-height: 1.8; 56} 57 58.mask { 59 position: fixed; 60 top: 0; 61 left: 0; 62 width: 100%; 63 height: 100%; 64 background-color: rgb(5, 3, 3); 65 opacity: 0.8; 66 z-index: 1; 67 opacity: 0; 68 visibility: hidden; 69}

modaljs

1document.getElementById("modalOpen").addEventListener("click",function(){ 2 document.getElementById("modal").classList.add("active"); 3 document.getElementById("mask").classList.add("active"); 4})

applicationjs

1// This file is automatically compiled by Webpack, along with any other files 2// present in this directory. You're encouraged to place your actual application logic in 3// a relevant structure within app/javascript and only use these pack files to reference 4// that code so it'll be compiled. 5 6require("@rails/ujs").start() 7// require("turbolinks").start() 8require("@rails/activestorage").start() 9require("channels") 10require('./modal') 11require('./preview') 12 13 14 15// Uncomment to copy all static images under ../images to the output folder and reference 16// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>) 17// or the `imagePath` JavaScript helper below. 18// 19// const images = require.context('../images', true) 20// const imagePath = (name) => images(name, true) 21 22

試したこと

エラー文からapplication.jsでのmodal.jsの記述の仕方が悪いんじゃないかと思ってます。

ですがモーダル機能実装前に画像のプレビュー機能を実装した時にはrequire('./preview')の
記述で行えたのでどれが正しいのかわかりません。
色々と記事をみましたが<script>タグを使うなどで書かれていたりしてやり方がバラバラなのでできれば統一したいです。

初歩的な質問ですがよろしくおねがいします。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

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

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

guest

回答2

0

自己解決

再度調べ直したところ原因はjavascriptファイルが読み込む前にhtmlファイルが読み込めていないから起きたと判明しました。
なので</body>の直前に<%= javascript_pack_tag 'application'%>を読み込ませることでエラー解決することができました。
回答ありがとうございました。

#before
applicaton.html.erb

ruby

1 2<!DOCTYPE html> 3<html> 4 <head> 5 <title>OldFashion</title> 6 <%= csrf_meta_tags %> 7 <%= csp_meta_tag %> 8 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> 9 <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"> 10 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 11 <%= javascript_pack_tag 'application'%> 12 </head> 13 14 <body> 15 <%= yield %> 16 </body> 17</html> 18

#after

ruby

1<!DOCTYPE html> 2<html> 3 <head> 4 <title>OldFashion</title> 5 <%= csrf_meta_tags %> 6 <%= csp_meta_tag %> 7 <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css"> 8 <link href="https://use.fontawesome.com/releases/v5.0.8/css/all.css" rel="stylesheet"> 9 <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> 10 </head> 11 12 <body> 13 <%= yield %> 14 <%= javascript_pack_tag 'application'%> 15 </body> 16</html> 17

投稿2021/02/04 11:04

koukinagano

総合スコア1

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

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

0

modalOpenというidを付したHTML要素が複数あったり
maskというidのHTML要素がなかったり・・

投稿2021/02/04 06:45

yambejp

総合スコア116690

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

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

koukinagano

2021/02/04 06:59

すいません!編集しました! よければ回答をお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問