JS 入力とアニメーションが同時にできない

Question

前提・実現したいこと

勉強の為にiPhoneの電卓に似せれるように作っています。
一通り作り終えて、「ボタンを押したら少し光るアニメーション」を作成したら、
電卓機能が働かなくなりました。

アニメーションを入れるまで電卓機能は問題なく使えていました。
何故なのか理由がわからないので、
教えていただきたいです。

プログラミングの勉強し初めて２ヶ月弱で初めて作っているコードで、
見づらいと思いますが、よろしくお願いします。

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

アニメーションのコードを入れるとボタン入力がされなくなる。

該当のソースコード

<div>
             <input type="text" class="disply" id="disply" value= "0" max="999999999" min="-999999999"> 
        </div>
        <div id="btn">
        <div id="first"> <!--%は未設定-->
            <input type="button" value="AC" id="AC" class="number" onclick=AC()>
            <input type="button" value="→" id="modori" class="number" onclick=modori()>
            <input type="button" value="%" id="percent" class="number" onclick=percent()>
            <input type="button" value="÷" id="waru" class="number" onclick=Mat(14)>
        </div>
        <div id="ue"> <!--7~9-->
            <input type="button" value="7" id="num_7" class="number" onclick=clicBtn(value)>
            <input type="button" value="8" id="num_8" class="number" onclick=clicBtn(value)>
            <input type="button" value="9" id="num_9" class="number" onclick=clicBtn(value)>
            <input type="button" value="×" id="kakeru" class="number" onclick=Mat(13)>
        </div>
        <div id="naka"> <!--4~6-->
            <input type="button" value="4" id="num_4" class="number" onclick=clicBtn(value)>
            <input type="button" value="5" id="num_5" class="number" onclick=clicBtn(value)>
            <input type="button" value="6" id="num_6" class="number"  onclick=clicBtn(value)>
            <input type="button" value="−" id="hiku" class="number" onclick=Mat(12)>
        </div>
        <div id="sita"> <!--1~3-->
            <input type="button" value="1" id="num_1" class="number" onclick=clicBtn(value)>
            <input type="button" value="2" id="num_2" class="number" onclick=clicBtn(value)>
            <input type="button" value="3" id="num_3" class="number" onclick=clicBtn(value)>
            <input type="button" value="+" id="tasu" class="number" onclick=Mat(11) >
        </div>
        <div id="zero"> <!--0~00-->
            <input type="button" value="0" id="num_0" class="number" onclick=clicBtn(value)>
            <input type="button" value="00" id="num_00" class="number" onclick=clic00(value)>
            <input type="button" value="." id="Decimal" class="number" onclick=clicBtn(value) >
            <input type="button" value="=" id="result" class="number" onclick=result()>
        </div>

.fade{     /*押している時のみアニメーションが発動*/
    animation: fadein;
    animation-duration:0.7s;
    
}
@keyframes fadein {
    from {
        opacity: 1;
        background-color: rgb(214, 214, 214);
    }
    to {
        opacity: 1;
    }
}

 var dis =  document.getElementById("disply") //表示中の値. 
            parseFloat(dis.value);
            var a = 0; //一旦入れる前者の数値
            var v = 0; //次の文字が入った時に入力が消える仕組み作り
            var math  //演算子の振り分け

//押したボタンの数値を入れる
function clicBtn(num){
            Rem();　//演算式が押されていないか確認
            if(dis.value == 0){
            dis.value = "";}
            dis.value += num;  
            maxmin(dis.value);  //最大最小値を確認
            }
//押したら光るアニメーションの処理
const btn = document.querySelectorAll('#btn input');
            for (var i = 0; i < btn.length; i++ ){               //全部のnumber要素に下記を付与
            btn[i].onclick = function() {                    //押したらfadeinが付属
            this.classList.add('fade');
            this.addEventListener('animationend', function() {
            this.classList.remove('fade');
               }
            )}
        }

試したこと

補足情報（FW/ツールのバージョンなど）

コンソールでのエラーは出ていません。

Comments

[m.ts10806]

エラーの確認はされましたか？
ブラウザ、デベロッパーツールのコンソール

[andy23]

コンソールでのエラーは出ていないです。
一応補足情報に画像追加しました。

[m.ts10806]

それは「動かなくなる」操作をしたときもですか？

[andy23]

伝え方が悪かっです。すみません。
動かなくなると言うより、「押したら光るアニメーション」はずっと機能しているが、
「押したらテキストエリアに数字が表示される」機能が働かなくなります。
アニメーションのコードをなくすと「押したらテキストエリアに数字が表示される」は機能します。
なので、どこを押しても動かなくなるというわけではないです。

Answer 1

btn[i].onclick = function() ...
にてclickイベントハンドラを上書きしているのが原因かと思います。
addEventListenerで追加すれば上手くいくかもしれません。

//押したら光るアニメーションの処理
const btn = document.querySelectorAll('#btn input');
for (var i = 0; i < btn.length; i++ ){               //全部のnumber要素に下記を付与
    btn[i].addEventListener("click", function() {                    //押したらfadeinが付属
        this.classList.add('fade');
        this.addEventListener('animationend', function() {
            this.classList.remove('fade');
        });
    });
}

Comments

[andy23]

上手くいきました！！

イベントハンドラとイベントリスナーについて勉強します。
ありがとうございます！！