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

前提・実現したいこと

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

Javascriptで、Youtubeの解説を見ながら、if文、else文を用いて簡単な４択のクイズゲームを作成しようとしていました。その際、正解のボタンをクリックすると正常にアラートが出るのですが、不正解のボタンを押しても反映されず、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文以前までは反映がされ、
以降は記入時も無記入時も反映がされていません。

maisumakun

2021/01/06 11:08

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

tora822

2021/01/06 11:10

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

行動規範の内容に同意します

回答2件

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

総合スコア145183