CSV出力ができない

前提・実現したいこと

HTML, CSS, javascriptで、VSCode, postmanを使い、
あるシステムを作成しています。

CSV出力を行いたいのですが作業中にエラーが出てしまいました。（下記に記載）
私では力不足なので皆様にお力添えいただきたいです。
よろしくお願いします。

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

index.js:121 Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')
    at index.js:121

HTML

<!DOCTYPE html>
<html lang="ja" dir="ltr">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="index.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script src="index.js"></script>
  </head>




  <body>


   <div id="container"></div>
   <table align="center">

        <tr><td>名前<br></td></tr>
        <tr><td><input type="text" name="名前"><br></td></tr>
        <tr><td>email<br></td></tr>
        <tr><td><input type="text" name="メール"><br></td></tr>
        <tr><td>出力先<br></td></tr>
        <tr><td><input type="text" name="出力先"><br><br></td></tr>

        <tr><td><input type="button" id="download" value="CSV出力" onclick="downloadCsv()"></td></tr>
      
      </table>
      </form>
    </body>
 </html>

CSS


html {
    text-align: center;
}

JS



function downloadCSV() {
  //ダウンロードするCSVファイル名を指定する
  const filename = "download.csv";
  //CSVデータ
  const data = "名前, email, 出力先";
  //BOMを付与する（Excelでの文字化け対策）
  const bom = new Uint8Array([0xef, 0xbb, 0xbf]);
  //Blobでデータを作成する
  const blob = new Blob([bom, data], { type: "text/csv" });

  //IE10/11用
  //download属性が機能しないためmsSaveBlobを使用する
  if (window.navigator.msSaveBlob) {
      window.navigator.msSaveBlob(blob, filename);

      //その他ブラウザ
  } else {
      //BlobからURLを作成する
      const url = (window.URL || window.webkitURL).createObjectURL(blob);
      //ダウンロード用にリンクを作成する
      const download = document.createElement("a");
      //リンク先に上記で生成したURLを指定する
      download.href = url;
      //download属性にファイル名を指定する
      download.download = filename;
      //作成したリンクをクリックしてダウンロードを実行する
      download.click();
      //createObjectURLで作成したURLを開放する
      (window.URL || window.webkitURL).revokeObjectURL(url);
  }
}

//ボタンを取得する
const download = document.getElementById("download");
//ボタンがクリックされたら「downloadCSV」を実行する
//ここにエラーが出ています
download.addEventListener("click", downloadCSV, false);

参考サイト

https://into-the-program.com/javascript-download-csv/

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

回答1件

ベストアンサー

<script src="index.js"></script>を</body>の直前に移動してみるとどうですか？

投稿2021/10/25 02:07

Lhankor_Mhy

総合スコア36163

iiinnn

2021/10/25 02:37

ご回答ありがとうございます。最初にあったjsのエラーが消えました。そして、名前・email・出力先も入力した名前にはなってはいないですが出力もできるようになりました。ですがHTMLでのボタン部分でのエラーが出てきてしまいました。（画像を追加したので見ていただけると嬉しいです）

Lhankor_Mhy

2021/10/25 02:47

onclick="downloadCsv()" を削除すればいいのでは？

iiinnn

2021/10/25 03:13

ありがとうございます。出力できるようになりました。

Lhankor_Mhy

2021/10/25 03:19

お役に立てたようで何よりです

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

あなたの回答

tips

プレビュー

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

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.46%

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

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

質問する

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

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