ボタンをクリックするたびにコンソール上にonとoffを交互に表示させるプログラムを作りたいのですが、ボタンを押しても動作しません。ページを読み込んだ段階でコンソール上に"Uncaught TypeError: btn.addEventListener is not a function at a.js:11"と表示されます。
そこでjsファイルの11行目を"btn.onclick = change;"と書き換えてonclickを使う方法も試したのですが、この場合はコンソール上にエラーメッセージは表示されなくなりましたが、ボタンを押しても何も動作しませんでした。
addEventListnerおよびonclickが機能しない原因を教えていただきたいです。
let btn = document.getElementsByClassName("off");
const change = function () {
if (btn.className == "off") {
console.log("off");
} else if (btn.className == "on") {
console.log("on");
}
};
btn.addEventListener("click", change);
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Events: Task 1</title>
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<section class="preview"></section>
<button class="off">button</button>
</body>
<script></script>
</html>