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!

Answer 1

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>

Answer 2

Use the focus pseudo-class https://developer.mozilla.org/en-US/docs/Web/CSS/:focus

.btn:focus {
    border: 4px solid red;
}

Change Button color when selected

3 个答案: