Q&A
前提・実現したいこと
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件
0
ベストアンサー
<script src="index.js"></script>を</body>の直前に移動してみるとどうですか？
投稿2021/10/25 02:07
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/10/25 02:37
2021/10/25 02:47
2021/10/25 03:13
2021/10/25 03:19