Q&A
現在作成しているDjangoアプリにJavaScriptを読み込まさたいのですが、うまくいきません。
内容としては、JavaScriptで作成したModalを表示させたいのです。
Modalはこちらを参考にしてます。
https://tech-dig.jp/js-modal/
現在はこんな感じで実装してあります。
#base.html
python
1{% load static %} 2 3<!DOCTYPE html> 4<html lang="ja"> 5 <head> 6 <title>Django App</title> 7 <meta charset="utf-8"> 8 <script type="text/javascript" src="{% static 'main.js' %}"></script> 9 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 10 </head> 11 <body> 12 <main class="container"> 13 <div class="main"> 14 <h1> 15 Hello World! 16 </h1> 17 </div> 18 {% block content %} 19 {% endblock content %} 20 </main> 21 </body> 22</html>
#hoge.html
python
1{% extends 'base.html' %} 2 3{% block content %} 4 5<h1> 6 Hello World! 7</h1> 8 9<div class="popup" id="js-popup"> 10 <div class="popup-inner"> 11 <div class="close-btn" id="js-close-btn"> 12 <i class="fas fa-times"></i> 13 </div> 14 <h1>Hello World!</h1> 15 </div> 16 <div class="black-background" id="js-black-bg"></div> 17</div> 18 19{% endblock content %}
#main.js
javascript
1window.onload = function() { 2 var popup = document.getElementById('js-popup'); 3 if(!popup) return; 4 popup.classList.add('is-show'); 5 6 var blackBg = document.getElementById('js-black-bg'); 7 var closeBtn = document.getElementById('js-close-btn'); 8 9 closePopUp(blackBg); 10 closePopUp(closeBtn); 11 12 function closePopUp(elem) { 13 if(!elem) return; 14 elem.addEventListener('click', function() { 15 popup.classList.remove('is-show'); 16 }) 17 } 18}
cssはうまく読み込めているのですが、JavaScriptはうまく読み込めず、hoge.htmlの下にそのまま表示されてしまっています。
よろしくお願いします。
回答2件
0
ベストアンサー
base.html
html
1<script type="text/javascript" src="{% static 'main.js' %}"></script>
staticディレクトリ構造がわからないのではっきり言えませんが、
tree
1static 2├─img 3├─js 4 ├─main.js
もし,上のような構造であれば以下のようなコードで読みこまれると思います。
html
1<script type="text/javascript" src="{% static 'js/main.js' %}"></script>
投稿2019/09/13 07:31
総合スコア67
0
extendsでbase.htmlを継承しても、
HTML
1{% load static %} 2```する必要があります・
投稿2020/06/22 04:53
総合スコア2720
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。