Change Button color when selected
Question
I have HTML output which have buttons. I would like to have the selected button change color to easily show which section is looked at.
I tried to do what was in this thread but no luck. The function does not seem to be used.
Here is simple html page where I have buttons and tried to add the function focusMe.
<HTML><HEAD>
<STYLE type="text/css">
.btn {
display: inline-block;
border: #2e6da4;
border-style: solid;
border-width: 2px;
width:190px;
height:54px;
border-radius: 6px;
background: linear-gradient(#FFFFFF, #B0B0B0);
font-weight: bold;
color: blue;
margin-top: 5px;
margin-bottom: 5px;
margin-right: 5px;
margin-left: 5px;
vertical-align: middle;
}
.btn:hover {
background: linear-gradient(#152B40, #152B40);
color: white
}
.btn:focus {
background: linear-gradient(#152B40, #152B40);
color: white
}
.button-selected {
border: 4px solid red;
}
</STYLE>
<script type="text/javascript">
function focusMe(button) {
document.getElementsByClassName("button-selected")[0].className = "";
button.className = "button-selected";
}
</script>
</HEAD><BODY>
<div>
<button class='btn'>1</button>
<button class='btn'>2</button>
<button class='btn'>3</button>
<button onClick="focusMe(this);" >4</button>
</div>
</BODY></HTML>
I understand the first 3 buttons would not be changed. Just trying this function on 4th button.
Thanks!
3 answers
solution1
1 ACCPTED 2015-09-01 21:56:50
The error thrown result from document.getElementsByClassName("button-selected")[0].className = "" , where at first click of button document.getElementsByClassName("button-selected")[0] is not defined , throwing error when attempting to set .className on element not in DOM .
Try using if statement to check if document.getElementsByClassName("button-selected")[0] is defined before setting .className at button element
<HTML> <HEAD> <STYLE type="text/css"> .btn { display: inline-block; border: #2e6da4; border-style: solid; border-width: 2px; width: 190px; height: 54px; border-radius: 6px; background: linear-gradient(#FFFFFF, #B0B0B0); font-weight: bold; color: blue; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; margin-left: 5px; vertical-align: middle; } .btn:hover { background: linear-gradient(#152B40, #152B40); color: white } .btn:focus { background: linear-gradient(#152B40, #152B40); color: white } .button-selected { border: 4px solid red; } </STYLE> <script type="text/javascript"> function focusMe(button) { var elem = document.getElementsByClassName("button-selected")[0]; // if element having class `"button-selected"` defined, do stuff if (elem) { elem.className = ""; } button.className = "button-selected"; } </script> </HEAD> <BODY> <div> <button class='btn'>1</button> <button class='btn'>2</button> <button class='btn'>3</button> <button onClick="focusMe(this);">4</button> </div> </BODY> </HTML>
This fixed the function. Even with this function, I see same behavior as I had before with just CSS where an additional click will remove the updated CSS of button when it was selected. Any idea what I need to do so the selected button keeps the updated color only until another button is selected?
js not necessary to reach expected result . Try utilizing css selector button:not(.btn) , :focus pseudo-class to toggle border of element not having .btn class on click of .btn element
<HTML> <HEAD> <STYLE type="text/css"> .btn { display: inline-block; border: #2e6da4; border-style: solid; border-width: 2px; width: 190px; height: 54px; border-radius: 6px; background: linear-gradient(#FFFFFF, #B0B0B0); font-weight: bold; color: blue; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; margin-left: 5px; vertical-align: middle; } .btn:hover { background: linear-gradient(#152B40, #152B40); color: white } .btn:focus { background: linear-gradient(#152B40, #152B40); color: white } button:not(.btn):focus { border: 4px solid red; } </STYLE> </HEAD> <BODY> <div> <button class='btn'>1</button> <button class='btn'>2</button> <button class='btn'>3</button> <button>4</button> </div> </BODY> </HTML>
solution2
0 2015-09-01 21:53:52
Use the focus pseudo-class https://developer.mozilla.org/en-US/docs/Web/CSS/:focus
.btn:focus {
border: 4px solid red;
}
solution3
-1 2016-08-04 11:42:43
<HTML> <HEAD> <STYLE type="text/css"> .btn { display: inline-block; border: #2e6da4; border-style: solid; border-width: 2px; width: 190px; height: 54px; border-radius: 6px; background: linear-gradient(#FFFFFF, #B0B0B0); font-weight: bold; color: blue; margin-top: 5px; margin-bottom: 5px; margin-right: 5px; margin-left: 5px; vertical-align: middle; } .btn:hover { background: linear-gradient(#152B40, #152B40); color: white } .btn:focus { background: linear-gradient(#152B40, #152B40); color: white } button:not(.btn):focus { border: 4px solid red; } </STYLE> </HEAD> <BODY> <div> <button class='btn'>1</button> <button class='btn'>2</button> <button class='btn'>3</button> <button>4</button> <button>5</button> </div> </BODY> </HTML>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.