javascript - 单击按钮时更改边框颜色

Question

您好，我正在努力做到这一点，当单击一个按钮时，边框颜色变为蓝色，所有其他按钮边框颜色变为橙色。我的问题是，它不工作，其他按钮的边框颜色没有改变。

function clickimageone(el){
	el.style.border = "1px solid blue";
	document.getElementById("border2").className="borderorange";
}

.border1{
	border: 1px solid red;
}
.border2{
	border: 1px solid red;
}
.bordeorange{
	border: 1px solid orange;
}

<div class="image"><img src="img/500.png" onclick="clickimageone(this)" class="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" class="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>

所以基本上我要问的是，当单击一个按钮时，该按钮的边框将变为蓝色，而所有其他按钮的颜色将变为橙色。

Answer 1

将 class 更改为 id 以便 document.getElementById() 正常工作

这是工作代码:

function clickimageone(el){
	el.style.border = "1px solid blue";
	document.getElementById("border2").style.border = "1px solid orange";
}

function clickimagetwo(el){
	el.style.border = "1px solid blue";
	document.getElementById("border1").style.border = "1px solid orange";
}

#border1{
	border: 1px solid red;
}
#border2{
	border: 1px solid red;
}
.bordeorange{
	border: 1px solid orange;
}

<div class="image"><img src="img/500.png" onclick="clickimageone(this)" id="border1" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 50px"></div>
<div class="image"><img src="img/1000.png" onclick="clickimagetwo(this)" id="border2" style="height: 500px; max-height: 150px; max-width: 300px; top: 50px; left: 100px"></div>