javascript - ボタンのクリック状態を制御する Javascript の for ループ

Question

私は JavaScript は初めてですが、ActionScript から移行したので、多くの AS3 ロジックを使用していますが、何が可能で何が不可能なのかわかりません。

画像スライダー ナビゲーション用に一連の 5 つのドットがあります。ドットは単なる CSS スタイルのドットなので、element.style.backgroundColor を使用して色を制御できるようにしようとしています。

これが私のスクリプトです：

function btnFeatured(thisBtn) {
    btnFeatured_reset();
    for (i = 1; i <= 5; i++) {
        if (thisBtn === document.getElementById("dotFeat" + i)) {
            document.getElementById("dotFeat" + i).style.backgroundColor = "#ffae00";
        }
    }
}

function btnFeatured_reset() {
    for (i = 1; i <= 5; i++) {
        document.getElementById("dotFeat" + i).style.backgroundColor = "#969696";
    }
}

問題なく動作しているように見えますが、ドットをクリックするとオレンジ色 (ffae00) になり、すぐに灰色 (969696) に戻ります。

念のため、ドットに使用しているスタイルを次に示します。

#featured-nav a {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 8px;
    background-color: #969696;
    border-bottom: none;
    margin: 0 14px;
}
#featured-nav a:hover {
    background-color: #ffae00;
    border-bottom: none;
}

そして私のhtml：

<a href='' onClick="btnFeatured(dotFeat1);" id="dotFeat1"></a>
<a href='' onClick="btnFeatured(dotFeat2);" id="dotFeat2"></a>
<a href='' onClick="btnFeatured(dotFeat3);" id="dotFeat3"></a>
<a href='' onClick="btnFeatured(dotFeat4);" id="dotFeat4"></a>
<a href='' onClick="btnFeatured(dotFeat5);" id="dotFeat5"></a>