

ボタンをクリックするたびにコンソール上にonとoffを交互に表示させるプログラムを作りたいのですが、ボタンを押しても動作しません。ページを読み込んだ段階でコンソール上に"Uncaught
TypeError: btn.addEventListener is not a function at a.js:11"と表示されます。

そこでjsファイルの11行目を"btn.onclick =
change;"と書き換えてonclickを使う方法も試したのですが、この場合はコンソール上にエラーメッセージは表示されなくなりましたが、ボタンを押しても何も動作しませんでした。

addEventListnerおよびonclickが機能しない原因を教えていただきたいです。

[code]

    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);
[/code]

[code]

    <!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>
[/code]


CC BY-SA 4.0
2021-03-28T06:20:38.397
74940
2021-03-28T07:04:48.100
2021-03-28T06:36:36.113
3060
44537
question
javascript html
ボタンクリックでコンソール上にメッセージを表示させたい


あなたのコードでは`btn`がHTMLのbutton要素ではなく、要素を1個だけ持つ`HTMLCollection`(DOM操作における配列のようなもの)になるからです。メソッド名が`getElementsByClassName`の形で、複数形の`Elements`になっている点に注意してください。

[getElementsByClassName](https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName)

button要素を取り出したければ、`getElementsByClassName`の結果から1つを取り出してください。

[code]

    let btn = document.getElementsByClassName("off")[0]; //<-
    
    const change = function () {
        if (btn.className == "off") {
            console.log("off");
        } else if (btn.className == "on") {
            console.log("on");
        }
    };
    btn.addEventListener("click", change);
[/code]

[code]

    <!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>
[/code]

なお、「onとoffを交互に」にの部分は、まだ完全には実装されていなかったようなので、そのままにしてあります。`addEventListener`が動作するようになれば、ご自身で解決できるだろうと思います。


CC BY-SA 4.0
2021-03-28T06:36:56.150
74941
2021-03-28T06:36:56.150
13972
74940
answer


複数クラス名が"off"の要素がある場合のコードの例です。

[code]

    let btns = document.getElementsByClassName("off");
    btns = Array.from(btns)
    
    const change = function(btn) {
        if (btn.className == "off") {
            console.log("off");
        } else if (btn.className == "on") {
            console.log("on");
        }
    };
    
    btns.forEach(function(btn) {
        btn.addEventListener("click", change(btn));
    });
    
[/code]


CC BY-SA 4.0
2021-03-28T07:04:48.100
74943
2021-03-28T07:04:48.100
39819
74940
answer