Q&A
script.jsだけにした場合に、コンソールへエラーは出ていませんか？
実現したいこと
script.jsというファイルを作成し、以下のコードを書いたのですが反応せず、loading.jsという別のファイルを作成し、そちらに同じコードを書いたらなぜか上手くいきました。この二つのファイルを入れておけばうまくいきますが、出来れば一つのファイルにまとめたいです。
発生している問題・分からないこと
同じコードを書いているのに、片方のJavascriptファイルにだけ反応する原因が分かりません。
該当のソースコード
Javascript
1//テキストのカウントアップ+バーの設定 2var bar = new ProgressBar.Line(splash_text, {//id名を指定 3 easing: 'easeInOut',//アニメーション効果linear、easeIn、easeOut、easeInOutが指定可能 4 duration: 1000,//時間指定(1000＝1秒) 5 strokeWidth: 0.2,//進捗ゲージの太さ 6 color: '#555',//進捗ゲージのカラー 7 trailWidth: 0.2,//ゲージベースの線の太さ 8 trailColor: '#bbb',//ゲージベースの線のカラー 9 text: {//テキストの形状を直接指定 10 style: {//天地中央に配置 11 position: 'absolute', 12 left: '50%', 13 top: '50%', 14 padding: '0', 15 margin: '-30px 0 0 0',//バーより上に配置 16 transform:'translate(-50%,-50%)', 17 'font-size':'1rem', 18 color: '#fff', 19 }, 20 autoStyleContainer: false //自動付与のスタイルを切る 21 }, 22 step: function(state, bar) { 23 bar.setText(Math.round(bar.value() * 100) + ' %'); //テキストの数値 24 } 25}); 26 27//アニメーションスタート 28bar.animate(1.0, function () {//バーを描画する割合を指定します 1.0 なら100%まで描画します 29 $("#splash").delay(500).fadeOut(800);//アニメーションが終わったら#splashエリアをフェードアウト 30});
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>4Beat</title> 7 <link rel="stylesheet" href="/scss/style.css"> 8</head> 9<body> 10 <!-- ローディング画面 --> 11 <div id="splash"> 12 <div id="splash_text"></div> 13 </div> 14 <!-- ヘッダー --> 15 <header class="header"> 16 <div class="header-list"> 17 <a href="#"><img src="/img/logo.png" alt="4Beat"></a> 18 <ul> 19 <li><a href="/concept/index.html">Concept</a></li> 20 <li><a href="/menu/index.html">Menu</a></li> 21 <li><a href="/live/index.html">Live</a></li> 22 <li><a href="#access">Access</a></li> 23 </ul> 24 </div> 25 <div class="header-visual"> 26 <div class="catch-phrase"> 27 <h1>ジャズ、<br>夜、<br>大人の時間</h1> 28 </div> 29 </div> 30 </header> 31 <!-- メイン --> 32 <main> 33 <section class="concept"> 34 <div class="title"> 35 <h2>Concept</h2> 36 </div> 37 <div class="concept-wrapper"> 38 <div class="concept-text"> 39 <p> 40 多忙な日々の中で、音楽を愛する大人たちが集い<br> 41 美味しいお酒と食事を楽しみながらJazzの調べに酔いしれる…。<br> 42 そんな癒しの空間を、Jazzを愛する大人たちにお届けします。 43 </p> 44 <a href="#">Read More</a> 45 </div> 46 <div class="concept-img"> 47 <img src="/img/ash-edmonds-LVygXSuJ40Y-unsplash.png" alt=""> 48 </div> 49 </div> 50 </section> 51 <section class="menu"> 52 <div class="title"> 53 <h2>Menu</h2> 54 </div> 55 <div class="menu-wrapper"> 56 <div class="menu-img"> 57 <img src="/img/alexandru-bogdan-ghita-m2qIYZXyGbs-unsplash.png" alt=""> 58 <img src="/img/sam-riz-nZudPb0uaK0-unsplash.png" alt=""> 59 <img src="/img/tai-s-captures-2EBTwzczg2A-unsplash.png" alt=""> 60 </div> 61 <div class="menu-text"> 62 <p> 63 多忙な日々の中で、音楽を愛する大人たちが集い<br> 64 美味しいお酒と食事を楽しみながらJazzの調べに酔いしれる…。<br> 65 そんな癒しの空間を、Jazzを愛する大人たちにお届けします。 66 </p> 67 <div class="btn"> 68 <a href="#">Drink</a> 69 <a href="#">Foods</a> 70 </div> 71 </div> 72 </div> 73 </section> 74 <section class="live"> 75 <div class="title"> 76 <h2>Live</h2> 77 </div> 78 <div class="live-wrapper"> 79 <div class="live-text"> 80 <p> 81 ライブ情報はSNSでも配信しています。<br> 82 魅力的なバンドが紡ぐ音が、夜の空気をやさしく震わせます。 83 </p> 84 <a href="#">Schedule</a> 85 </div> 86 </div> 87 </section> 88 <section class="access" id="access"> 89 <div class="title"> 90 <h2>Access</h2> 91 </div> 92 <div class="access-wrapper"> 93 <div class="access-text"> 94 <p> 95 〒107-0062<br> 96 東京都港区青山6-3-XX<br> 97 営業時間 : 19:00～1:00<br> 98 定休日 : 日・月・祝<br> 99 TEL - FAX 0XX-XXX-XXXX 100 </p> 101 <a href="#">Map</a> 102 </div> 103 </div> 104 </section> 105 </main> 106 <!-- フッター --> 107 <footer class="footer"> 108 <div class="footer-wrapper"> 109 <div class="footer-list"> 110 <a href="#"><img src="/img/logo.png" alt="4Beat"></a> 111 <ul> 112 <li><a href="/concept/index.html">Concept</a></li> 113 <li><a href="/menu/index.html">Menu</a></li> 114 <li><a href="/live/index.html">Live</a></li> 115 <li><a href="#access">Access</a></li> 116 </ul> 117 </div> 118 <div class="sns-btn"> 119 <a href="#"><img src="/img/twitter-X.png" alt="twitter-X"></a> 120 <a href="#"><img src="/img/instagram.png" alt="instagram"></a> 121 <a href="#"><img src="/img/facebook.png" alt="facebook"></a> 122 </div> 123 </div> 124 <div class="copyright"> 125 <p>©JAZZ & BAR 4Beat</p> 126 </div> 127 </footer> 128 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 129 <script src="https://cdn.jsdelivr.net/npm/progressbar.js"></script> 130 <!--自作のJS--> 131 <script src="/js/script.js"></script> 132 <script src="/js/loading.js"></script> 133</body> 134</html>
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
ChatGPTで質問して、教えてもらったコードを貼り付けてみましたが、やはりloading.jsを削除すると、うまく動きません。
補足
特になし
回答1件
ベストアンサー
あなたの回答
tips
プレビュー
