前提・実現したいこと
モーダル機能の実装途中に出たエラーです。
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/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。