javascriptを用いたカウンターのエラー

Question

カウンターを作る

javascriptを用いてカウンターを作りたい。
カウントアップをクリックすると数字に１がたされていくようなものを作りたい。
コードは自分ではどこが違うのかわかりません。

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

.addEventListenerのエラー

該当のソースコード

<div id="disp"></div>
    <button id="down">カウントダウン</button>
    <button id="up">カウントアップ</button>

    <script >
        let disp=document.getElementById("disp");
        let up=document.getElementById("up");
        let down=document.getElementById("down");
        let count=0;

 up.addEventListener('click', function(){
    count += 1;
    disp.innerHTML=count;

 });

 down.addEventListener('click',function(){
    count -= 1;
    disp.innerHTML=count;

 });
    </script>

Comments

[kei344]

（質問文は編集できます）質問文のコードはコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[退会済みユーザー]

更新いたしました。教えていただきありがとうございます。

Answer 1

getElementByIdはidを付けたHTML要素にしか使えません。classをidに置き換えるか、querySelectorを使いましょう。

【Document.getElementById() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementById

【Document.getElementsByClassName() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/getElementsByClassName

【Document.querySelector() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelector

【Document.querySelectorAll() - Web API | MDN】
https://developer.mozilla.org/ja/docs/Web/API/Document/querySelectorAll

Answer 2

ボタン要素に関して、HTML要素は、クラスで定義されているのに、
JavaScriptでは、IDで取得しようとしているからです。
各ボタン要素は一意の機能のようですので、手っ取り早くHTMLを修正するのが吉かと。

<button id="down">カウントダウン</button>
<button id="up">カウントアップ</button>