Hello, I'm attempting to create a function where clicking on one button changes its border color to blue and changes the border color of all other buttons to orange. However, I'm encountering an issue where the border color for the other buttons is not changing as expected.
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>Essentially, I am looking to have the border of the clicked button turn blue while changing the color of all other buttons to orange upon clicking.