javascriptでhover操作をしたい

Question

javascriptでボタンをホバーしたときに色が変わるようにしたいのですが、
以下のコードだと、なにも変わりません。
btn[i]をbtn[0]にすると、色が変わるのですが、[i]ではできない理由がわかりません。
どなたかお力添えの程宜しくお願いします。

tagNameまたは、class名を取得して実装したいです。

    <a class="btn" href="">ボタン</a>
    <style>
a {
    display: block;
    width: 200px;
    background: #000;
    text-align: center;
    padding-top: 15px;
    padding-bottom: 15px;
    color: #ffffff;
    text-decoration: none;
}
    </style>

<script>
    
    let btn = document.getElementsByTagName("a");

    for(i = 0; i < btn.length; i++){
        btn[i].addEventListener("mouseenter",function(){
            btn[i].style.backgroundColor = "red";
            btn[i].style.transition = "all 0.3s ease";
        },false);
        
        btn[i].addEventListener("mouseleave",function(){
            btn[i].style.backgroundColor = "black";
            btn[i].style.transition = "all 0.3s ease";

        },false);
    }
</script>

Answer 1

cssでやれば良いような気はしますが

i=0 → let i=0

Comments

[BamBam]

ありがとうございます。
jsの勉強のため、jsでの実装をやってみたかったのですが、つまづいてしまいました。