javascript - Java语言边框颜色在单选按钮单击时未更改

很抱歉提出一个问题，我敢肯定，很多人会认为这是非常基本的，但是我并不真正了解JavaScript，并且随着我的应用程序的发展，我正在学习

我有以下



单击单选按钮时，我希望带有class="teams"的div将边框颜色更改为红色。

我想出了这段代码

<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="one" value="'.$row['team1'].'"><span>'.$team1.'</span></label><br />
<label><input type="radio" onclick=" return border()" name="picks['.$x.']" id="two" value="'.$row['team2'].'"><span>'.$team2.'</span></label><br />
<label><input type="radio" onclick="return border()" name="picks['.$x.']" id="three" value="draw"><span>Draw</span></label><br />
</center>';

function border(){
    if(document.getElementById("one").checked){
        document.getElementById("teams").style.borderColor="red"
    }

    else if( document.getElementById("two").checked){
        document.getElementById("teams").style.borderColor="red"
    }
}

echo'<div class="teams">';
echo'<img src="images/teams/'.$src1.'.png" id="t1" />';
echo'<img src="images/teams/'.$src2.'.png" id="t2" />';
echo'</div>';

显然我做错了。任何帮助将不胜感激

以下是引发的错误。

最佳答案

teams是类属性，而不是ID。

将getElementById("teams")更改为getElementsByClassName("teams")

请注意，getElementsByClassName("teams")返回匹配元素的数组；因此，请使用循环来设置每个值，或仅使用getElementsByClassName("teams")[0].style.borderColor

function border() {
    var el = document.getElementsByClassName("teams")[0];
    if (document.getElementById("one").checked || document.getElementById("two").checked) {
        el.style.borderColor = "red";
        el.style.borderStyle = "solid";
    }
}

关于javascript - Java语言边框颜色在单选按钮单击时未更改，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30320457/