Why my onclick event doesn't work when used with onmouseover and onmouseout?

Question

var b = document.getElementsByClassName("horizontal_nav_buttons");   //grab all the horizontal buttons..

function horizontal_nav_on_click(id) {		//clicking one of the horizontal nav buttons..
/*******************/
/* OnClick Effect  */
/*******************/
for (var i = 0; i < b.length; i++) {
    b[i].style.border = "thin solid #9ed3d2";						// reset them all back to their default style
	b[i].style.color = "black";	
	b[i].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)";
	} 
	b[id].style.color = "red";
	b[id].style.border = "thin solid orange";											//change the style of the one we clicked!
	b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)";
}
function horizontal_nav_hover(id) {
	b[id].style.color = "red";
	b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)";
	b[id].style.border = "thin solid orange";
}
function horizontal_nav_out(id) {
	b[id].style.color = "black";
	b[id].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)";
	b[id].style.border = "thin solid #9ed3d2";
}

.horizontal_nav_buttons {

	margin-left:10px;
	margin-top:3px;
	margin-right:-10px;
  
	background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
	border-radius:6px;
	height: 22px;
	border: thin solid #9ed3d2;
	
}
.Horizontal_Nav_Bar {
	
	background-color:#f1b5a8;
	border-radius: 25px 25px 25px 25px;
	height: 27px;
	/margin-top:2px;

}

<div class="Horizontal_Nav_Bar">
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(0)" onmouseover="horizontal_nav_hover(0)" onmouseout="horizontal_nav_out(0)">Link 1 </button>  
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(1)" onmouseover="horizontal_nav_hover(1)" onmouseout="horizontal_nav_out(1)">Link 2 Configuration</button>
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(2)" onmouseover="horizontal_nav_hover(2)" onmouseout="horizontal_nav_out(2)">Link 3 </button>
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(3)" onmouseover="horizontal_nav_hover(3)" onmouseout="horizontal_nav_out(3)">Link 4 </button>		</div>

Can anyone help me understand why the onClick event is failing to change the style of the buttons? I have no idea why this doesn't work. When I remove the onmouseover event and the onmouseout events, the onclick works as expected.

Answer 1

Your onmouseout is overriding the styling you have placed on your button in the onClick event. Just remove the call to onmouseout and you'll see it works fine.

EDIT:

@Dumisani noted that this won't remove the styling when you exit a button. To get around this simply track which one is active using a simple variable called clicked.

In your onclick set clicked = to the value of id that is passed to the clicked function. Then in your onmouseout update every element where id != clicked.

var b = document.getElementsByClassName("horizontal_nav_buttons");   //grab all the horizontal buttons..

var clicked = -1;

function horizontal_nav_on_click(id) {
//clicking one of the horizontal nav buttons..
/*******************/
/* OnClick Effect  */
/*******************/
for (var i = 0; i < b.length; i++) {
    b[i].style.border = "thin solid #9ed3d2";						// reset them all back to their default style
	b[i].style.color = "black";	
	b[i].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)";
	} 
	b[id].style.color = "red";
	b[id].style.border = "thin solid orange";											//change the style of the one we clicked!
	b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)";
  clicked = id;
}

function horizontal_nav_hover(id) {
	b[id].style.color = "red";
	b[id].style.background = "linear-gradient(to bottom, #ffec64 5%, #ffab23 100%)";
	b[id].style.border = "thin solid orange";
}

function horizontal_nav_out(id) {
  if(id != clicked){
	    b[id].style.color = "black";
	    b[id].style.background = "linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%)";
	    b[id].style.border = "thin solid #9ed3d2";
  }
}

.horizontal_nav_buttons {

	margin-left:10px;
	margin-top:3px;
	margin-right:-10px;
  
	background: linear-gradient(to bottom, rgba(242,245,246,1) 0%,rgba(227,234,237,1) 37%,rgba(200,215,220,1) 100%);
	border-radius:6px;
	height: 22px;
	border: thin solid #9ed3d2;
	
}
.Horizontal_Nav_Bar {
	
	background-color:#f1b5a8;
	border-radius: 25px 25px 25px 25px;
	height: 27px;
	/margin-top:2px;

}

<div class="Horizontal_Nav_Bar">
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(0)" onmouseover="horizontal_nav_hover(0)" onmouseout="horizontal_nav_out(0)">Link 1 </button>  
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(1)" onmouseover="horizontal_nav_hover(1)" onmouseout="horizontal_nav_out(1)">Link 2 Configuration</button>
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(2)" onmouseover="horizontal_nav_hover(2)" onmouseout="horizontal_nav_out(2)">Link 3 </button>
    <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(3)" onmouseover="horizontal_nav_hover(3)" onmouseout="horizontal_nav_out(3)">Link 4 </button>		</div>

Answer 2

To add to the existing answer, this can be simplified by setting the className in your script, and relying on CSS for the rest:

var b = document.getElementsByClassName("horizontal_nav_buttons");

function horizontal_nav_on_click(id) {
  for (var i = 0; i < b.length; i++) {
    b[i].className = 'horizontal_nav_buttons';
  }

  b[id].className = 'horizontal_nav_buttons clicked';
}

.Horizontal_Nav_Bar {
  background-color: #f1b5a8;
  border-radius: 25px 25px 25px 25px;
  height: 27px;
  /margin-top: 2px;
}

.horizontal_nav_buttons {
  margin-left: 10px;
  margin-top: 3px;
  margin-right: -10px;
  border-radius: 6px;
  height: 22px;
  color: black;
  background: linear-gradient(to bottom, rgba(242, 245, 246, 1) 0%, rgba(227, 234, 237, 1) 37%, rgba(200, 215, 220, 1) 100%);
  border: thin solid #9ed3d";

}

.horizontal_nav_buttons:hover {
  color: red;
  background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
  border: thin solid orange;
}

.clicked {
  color: red;
  border: thin solid orange;
  background: linear-gradient(to bottom, #ffec64 5%, #ffab23 100%);
}

<div class="Horizontal_Nav_Bar">
  <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(0)">Link 1 </button>
  <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(1)">Link 2 Configuration</button>
  <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(2)">Link 3 </button>
  <button type='button' class="horizontal_nav_buttons" onclick="horizontal_nav_on_click(3)">Link 4 </button>

</div>