はじめに
JavaScriptでTODOアプリを作るチュートリアルを行っていた際、躓いたので共有します。
開発環境
vscode
buttonクリックでアラートを表示させるコードがうまく動かない
index.html
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./styles.css" />
<title>TODO-app</title>
</head>
<body>
<div class="input-area">
<input placeholder="TODOを入力" />
<button id="add-button">追加</button>
</div>
<div class="incomplete-area">
<p class="title">未完了のTODO</p>
<ul>
<li>
<div class="list-row">
<p class="todo-item">TODOです</p>
<button>完了</button>
<button>削除</button>
</div>
</li>
<li>
<div class="list-row">
<p class="todo-item">TODOです</p>
<button>完了</button>
<button>削除</button>
</div>
</li>
</ul>
</div>
<div class="complete-area">
<p class="title">完了のTODO</p>
<ul>
<li>
<div class="list-row">
<p class="todo-item">TODOでちた</p>
<button>戻す</button>
</div>
</li>
</ul>
</div>
<script src="./index.js"></script>
</body>
</html>
index.js
import "./styles.css";
const onClickAdd = () => {
alert();
};
document.getElementById("add-button").addEventListener("click", onClickAdd);
出ていたエラー
Uncaught SyntaxError: Cannot use import statement outside a module
解決
index.html
// 省略
</div>
<script src="./index.js" type="module"></script>
htmlのscriptタグ内にtypeとしてmoduleを設定し忘れていました。
参考文献