JavaScript - CSS 元素样式不会改变？

Question

我正在制作一个扑克程序。我有一个 div 网格，用于显示卡片的位置。用户可以点击输入卡片，使图像出现在所选区域。每个 div 都有一个默认的 1px 黑色点状边框，当用户单击其中一个时，边框会更改样式为 2px 实心蓝色边框。在该函数中，所有 div 上的边框应该变回默认值，然后边框样式会更改为被单击的那个。问题在于，如果用户将卡片输入其中一个 div，然后在 div 仍处于选中状态时再次单击该 div，则该 div 将永远处于选中状态。这是函数:

var clickCardLocation = function(e){
    var target = e.target || e.srcElement; //target element of click
    var cardClass = document.getElementsByClassName("card"); //creates array of div class="card" elements
    var SELECTED = "2px solid blue";
    var DESELECTED = "1px dotted black";
    for (var i = 0; i < cardClass.length; i++){ //loop through all card divs in gui
        cardClass[i].style.border = DESELECTED; //deselect them
    }
    target.style.border = SELECTED; //change border for only clicked div
};

当我调试它时，它看起来逻辑上是合理的，但它的行为不正确。边框在屏幕上保持选中状态，即使调试器说 cardClass[i].style.border = "1px dotted black"。

Answer 1

没有getElementByClassName。有 getElementsByClassName。我不确定调试器如何到达那里。