title: Change Button color when selected
body: <p>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.</p>
  
  <p>I tried to do what was in <a href="https://stackoverflow.com/questions/14385572/button-color-change-when-selected">this thread</a> but no luck. The function does not seem to be used.</p>
  
  <p>Here is simple html page where I have buttons and tried to add the function focusMe.</p>
  
  <pre><code>    &lt;HTML&gt;&lt;HEAD&gt;
      &lt;STYLE type="text/css"&gt;
  
  .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;
  }   
  
      &lt;/STYLE&gt;
  
      &lt;script type="text/javascript"&gt;
  
      function focusMe(button) {
      document.getElementsByClassName("button-selected")[0].className = "";
      button.className = "button-selected";
  }
  
      &lt;/script&gt;
  
  &lt;/HEAD&gt;&lt;BODY&gt;
  
  &lt;div&gt;
  
  &lt;button class='btn'&gt;1&lt;/button&gt;
  &lt;button class='btn'&gt;2&lt;/button&gt;
  &lt;button class='btn'&gt;3&lt;/button&gt;
  &lt;button onClick="focusMe(this);" &gt;4&lt;/button&gt;
  &lt;/div&gt;
  
  &lt;/BODY&gt;&lt;/HTML&gt;
  </code></pre>
  
  <p>I understand the first 3 buttons would not be changed. Just trying this function on 4th button.</p>
  
  <p>Thanks!</p>