I have a set of 6 labels that act as buttons. When one is clicked, it changes from white to blue. If another label is clicked, the previously blue label turns white and the newly clicked one turns blue.
Currently, the code below sets all labels to white but doesn't seem to change the background color of the newly clicked label to blue. However, if I comment out the line:
document.getElementsByTagName('label').style.backgroundColor = '#fff';
Then each clicked label turns blue, but remains blue when a new label is clicked. So what I'm trying to figure out is how to set the background color of all labels to white and then only turn the background of the most recently clicked label to blue.
The desired outcome is for only the most recently clicked label to have a blue background while the others remain white.
Thank you in advance
<script type="text/javascript">
function toggle(label) {
document.getElementById('one').style.display = 'block';
var labels = document.getElementsByTagName('label');
for (var i = 0; i < labels.length; i++) {
labels[i].style.backgroundColor = '#fff';
}
document.getElementById(label).style.color = 'rgb(54, 95, 145)';
document.getElementById(label).style.backgroundColor = 'rgb(193,203,225)';
}
</script>
<label id='Label6' class='button' onmousedown = 'toggle("Label6")'>Personal Details</label>
<label id='Label1' class='button' onmousedown = 'toggle("Label1")'>Education</label>
<label id='Label2' class='button' onmousedown = 'toggle("Label2")'>Achievements</label>
<label id='Label3' class='button' onmousedown = 'toggle("Label3")'>Work Experience </label>
<label id='Label5' class='button' onmousedown = 'toggle("Label5")'>IT Skills</label>
<label id='Label4' class='button' onmousedown = 'toggle("Label4")'>Languages</label>