title: can't make loader visible when button is clicked
body: <p>The loader will not show when button is clicked.  Can anyone tell me what I am doing wrong?  I tried moving the script around with no impact.  The message does change when the button is clicked.  I tried changing the   to  and changed from document.getElementsByName to document.getElementById with no impact.</p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
  
  &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
  &lt;style&gt;
  .loader {
      
    border: 16px solid #f3f3f3;
    border-radius: 50%;
    border-top: 16px solid #3498db;
    width: 120px;
    height: 120px;
    -webkit-animation: spin 2s linear infinite; 
    animation: spin 2s linear infinite;
  }
  
  
  @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;h2&gt;How To Create A Loader&lt;/h2&gt;
  
  &lt;div class=&quot;loader&quot; style = &quot;visibility : hidden&quot;&gt;&lt;/div&gt;  
   &lt;p&gt;&lt;button onclick=&quot;clickMe(); return false;&quot;&gt;Make loader visible&lt;/button&gt;&lt;/p&gt; 
    &lt;div id=&quot;message&quot; style=&quot;color:green&quot;&gt;test to unhide loader&lt;/div&gt;  
  
  
  &lt;/body&gt;
  &lt;script&gt;
        function clickMe() {
        document.getElementById('message').innerHTML = &quot;class&quot;; 
          document.getElementsByClassName(&quot;loader&quot;).visibility = 'visible';
        }
  
         
      &lt;/script&gt;
  
  &lt;/html&gt;
  </code></pre>