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

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

詳細はこちら
JavaScript

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

Q&A

解決済

2回答

1089閲覧

Javascriptで、HTMLで設定したボタンをクリックした時の動作を反映させたい

tora822

総合スコア0

JavaScript

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

0グッド

0クリップ

投稿2021/01/06 11:03

編集2021/01/06 15:10

前提・実現したいこと

正誤ゲームで、不正解のアラートを出したい

Javascriptで、Youtubeの解説を見ながら、if文、else文を用いて簡単な4択のクイズゲームを作成しようとしていました。その際、正解のボタンをクリックすると正常にアラートが出るのですが、不正解のボタンを押しても反映されず、consoleに以下のようなエラーが出ました。

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

エラーメッセージ ```index.html:1 Access to internal resource at 'file:///Users/macuser/Documents/testgame/site.webmanifest' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https. ### 該当のソースコード ```ここに言語名を入力 ソースコード ```const question = "ホウエン地方で最初に手に入れられないポケモンはどれ?" const answers = [ "キモリ", "ピカチュウ", "アチャモ", "ミズゴロウ" ]; const correct ="ピカチュウ"; document.getElementById("js-question").textContent=question; document .getElementsByTagName("button")[0].textContent=answers[0]; document .getElementsByTagName("button")[1].textContent=answers[1]; document .getElementsByTagName("button")[2].textContent=answers[2]; document .getElementsByTagName("button")[3].textContent=answers[3]; document.getElementsByTagName("button")[1]. addEventListener("click",()=>{ if (correct === document.getElementsByTagName("button")[1].textContent){ window.alert("正解!"); }else{ window.alert("不正解!"); } }); HTML <!doctype html> <html class="no-js" lang=""> <head> <meta charset="utf-8"> <title></title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta property="og:title" content=""> <meta property="og:type" content=""> <meta property="og:url" content=""> <meta property="og:image" content=""> <link rel="apple-touch-icon" href="icon.png"> <!-- Place favicon.ico in the root directory --> <!-- CSS only --> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous"> <meta name="theme-color" content="#fafafa"> </head> <body> <div class="container"> <div class="jumbotron mt-5"> <div class="d-flex justify-content-center"> <div id="js-question" class="alert alert-primary" role="alert"> A simple primary alert—check it out! </div> </div> <div id="js-items" class="d-flex justify-content-center"> <div class="m-2"> <button type="button" id="js-btn-1" class="btn btn-primary">Primary</button> </div> <div class="m-2"> <button type="button" id="js-btn-2" class="btn btn-primary">Primary</button> </div> <div class="m-2"> <button type="button" id="js-btn-3" class="btn btn-primary">Primary</button> </div> <div class="m-2"> <button type="button" id="js-btn-4" class="btn btn-primary">Primary</button> </div> </div> </div> </div> <script src="app.js"></script> </body> </html> ### 試したこと スペルミスのチェック、CORSとは何かを検索 ### 補足情報(FW/ツールのバージョンなど) ここにより詳細な情報を記載してください。 この動画を参考にしました。 https://www.youtube.com/watch?v=fAluwAmHrws&t=311s jaのelse文以前までは反映がされ、 以降は記入時も無記入時も反映がされていません。

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

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

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

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

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

maisumakun

2021/01/06 11:08

HTML側のコードはどのようになっていますか?
tora822

2021/01/06 11:10

追記させていただきます。
guest

回答2

0

Access to internal resource at 'file:///Users/macuser/Documents/testgame/site.webmanifest' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

これは、<link rel="manifest" href="site.webmanifest">が発生させているエラーです。file://では、セキュリティ上の理由で全ファイルが別々のオリジンとみなされるので、エラーとなっています。

マニフェストを必要とするほど高度なことを行わないのであれば、当該の<link>は消しておきましょう。ふつうに「クリックしたら何が動作する」程度のことを行う上では、全く関係しません。

投稿2021/01/06 11:28

maisumakun

総合スコア145975

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

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

tora822

2021/01/06 11:33

ありがとうございます!エラーは消えたのですが、elseが反映されないままです。どのようにすればよいのでしょうか。
tora822

2021/01/06 11:34

ご指摘いただいた点については編集を加えておきます。
tora822

2021/01/06 16:01

ベストアンサーの設定を間違えてしまいました!エラーを解決していただきありがとうございました!
guest

0

自己解決

解決しました! 設定を、ボタン1の分しかできていなかったため、ボタン0,2,3が無反応だったと気づきました!
考えてくださった方々、ありがとうございました!

投稿2021/01/06 15:58

tora822

総合スコア0

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.36%

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

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

質問する

関連した質問