質問をすることでしか得られない、回答やアドバイスがある。

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

新規登録して質問してみよう
ただいま回答率
85.49%
JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

727閲覧

HTMLでJavaScriptファイルが読み込みません。

shinaozora50

総合スコア15

JavaScript

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

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/10/29 21:36

編集2020/10/30 03:11

JavaScript初心者です。
簡単なクイズゲームみたいなのを、作ろうとしているんですが、HTMLでCSSファイルは読み込むのですが、JavaScriptファイルが読み込みません。

JavaScriptをまだまだ理解できてないので、JavaScriptも間違って書いているかもしれないです。

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>Document</title> 7 <link rel="stylesheet" href="style2.css"> 8 <script src="index2.js"></script> 9</head> 10 <body> 11 <div class="container"> 12 <div class="jumbotron mt-5"> 13 <div class="d-flex justify-content-center"> 14 <div id="js-question" class="alert alert-primary" role="alert"> 15 <h1>世界で最も売れたゲーム機は?</h1> 16 </div> 17 </div> 18 <div id="js-items" class="d-flex justify-content-center"> 19 <div class="m-2"> 20 <button type="button" id="js-btn-1" class="btn btn-primary">スーパーファミコン</button> 21 </div> 22 <div class="m-2"> 23 <button type="button" id="js-btn-2" class="btn btn-primary">プレイステーション2</button> 24 </div> 25 <div class="m-2"> 26 <button type="button" id="js-btn-3" class="btn btn-primary">ニンテンドースイッチ</button> 27 </div> 28 <div> 29 <button type="button" id="js-btn-4" class="btn btn-primary">xbox</button> 30 </div> 31 <div> 32 <button type="button" id="js-btn-5" class="btn btn-primary">任天堂64</button> 33 </div> 34 </div> 35 </div> 36 </div> 37 <script src="main.js"></script> 38 </body> 39</html> 40

CSS

1.alart { 2 font-size: 20px; 3} 4 5.btn { 6 7 background-color: rgba(29, 139, 212, 0.904); 8 height: 100px; 9 width: 150px; 10 border-radius: 10px; 11 font-size: 25px; 12 color: white; 13 margin: 15px; 14 float: left; 15}

JavaScript

1let correct = "プレイステーション2"; 2let button = document.getElementsByTagName("button"); 3let clickHandler = function(event) { 4 if (correct === event.target.textContent) { 5 //イベントをオブジェクトとして取得 + テキストの内容と解答を比較 6 window.alert("おめでとうございます、正解です!"); 7 } else { 8 window.alert("残念ですが、不正解です"); 9 } 10}; 11button[0].addEventListener("click", function(event) { 12 clickHandler(event); 13}); 14button[1].addEventListener("click", function(event) { 15 clickHandler(event); 16}); 17button[2].addEventListener("click", function(event) { 18 clickHandler(event); 19}); 20button[3].addEventListener("click", function(event) { 21 clickHandler(event); 22}); 23button[4].addEventListener("click", function(event) { 24 clickHandler(event); 25});

どこが間違っていて、JavaScriptファイル読み込まないんでしょうか?
超初心者で、ほとんど間違ってるかもしれませんが、教えていただけないでしょうか?
よろしくお願いします。

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

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

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

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

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

退会済みユーザー

退会済みユーザー

2020/10/29 23:17 編集

試しに、外部ファイルにするのを止めて、インラインで html ソースの中にスクリプトを書いてみたらどうなりますか? (読み込めないのではなくて動かないのではないかという疑問を解消するため。確認済みでしたら失礼しました) それから、ブラウザのキャッシュの問題とかは理解されてますか?
m.ts10806

2020/10/29 23:39

index2.js main.js どっちの話でしょう。提示のコードはどちらでしょうか。 ブラウザ開発ツールのコンソールは確認されましたか?エラーが出ていればそこで分かります。
退会済みユーザー

退会済みユーザー

2020/10/30 01:27

> もう一度新たに質問しなおししなければならなかった場合は、今後そのように気を付けます。 そうしてください。表題の「HTMLでJavaScriptファイルが読み込みません」から話が全く違ってきています。このスレッドはクローズして新たに別のスレッドを建てて質問してください。
shinaozora50

2020/10/30 03:14

今後気を付けます。 申し訳ございませんでした。
退会済みユーザー

退会済みユーザー

2020/10/30 03:44

解決の役に立った回答(このスレッドでは yambejp さんの回答)にベストアンサーを付けてください。ベストアンサーがついてないスレッドはクローズしてないように見えますので。
guest

回答1

0

ベストアンサー

もし提示されるjsがindex2.jsなら、ページの先頭でその後に作成されるDOMはつかめません
main.jsだとしたら普通に動いていると思います

投稿2020/10/30 00:21

yambejp

総合スコア114738

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

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

shinaozora50

2020/10/30 00:52

JavaScriptのファイル名をmain.jsに変えたら、動くようになりました。 教えて下さってありがとうございます。
yambejp

2020/10/30 01:01

2つjsを読んでいるのはなにかをまるパクリしているだけですか?
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.49%

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

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

質問する

関連した質問