'How can I show an element with Google Script when trying to make HTML spinner visible?

I am trying to show a spinning loader when a button is pushed. These have no impact:

document.getElementsByClass('loader')[0].style.visibility = 'visible';

document.getElementsByClass('loader').style.visibility = 'visible';

What am I doing wrong?

html code

<html>
   <script>
      function clickMe() {
        document.getElementById('message').innerHTML = "mp"; 
        document.getElementsByClass('loader')[0].style.visibility = 'visible';
        google.script.run.withSuccessHandler(onSuccess).ChgNm();
       }
       function onSuccess(value){
       document.getElementById('message').innerHTML= value;  
       }
    </script>
  <head>
    <base target="_top">
  </head>
  <body>
    <style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite; /* Safari */
  animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
    <div class ='loader' visibility : hidden>Working</div>
     <div id="message" style="color:green">test to unhide loader</div>    
    <p><button onclick="clickMe(); return false;">Look up my personal link</button></p> 
  </body>

Code

function doGet(e) {
  return HtmlService
    .createHtmlOutputFromFile('Index.html')
    .setTitle("Hello World Example");//We can set title from here
}

function ChgNm(){
  return "changed the name"
}
htmlgoogle-apps-script


Solution 1:[1]

You have 2 mistakes.

getElementsByClass() is not a function. Replace it with getElementsByClassName() like this:

document.getElementsByClassName('loader')[0].style.visibility = 'visible';

visibility : hidden is a CSS property, so it is supposed to go inside the style attribute, like this:

<div class ='loader'style="visibility:hidden">Working</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Alfredo

Related Questions