can't make loader visible when button is clicked-CodePudding

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.

<!DOCTYPE html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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); }
}


</style>
</head>
<body>

<h2>How To Create A Loader</h2>

<div  style = "visibility : hidden"></div>  
 <p><button onclick="clickMe(); return false;">Make loader visible</button></p> 
  <div id="message" style="color:green">test to unhide loader</div>  


</body>
<script>
      function clickMe() {
      document.getElementById('message').innerHTML = "class"; 
        document.getElementsByClassName("loader").visibility = 'visible';
      }

       
    </script>

</html>

CodePudding user response：

There are two errors related to the visibility setting.

First one is document.getElementsByClassName("loader") returning a list of elements, not just one element. Even though the list contains just one entry, it's still a list. You can get the first entry from a list using the zero index.

The second problem is that in your code you try to set the visibility on an element, but it's actually an attribute of an element's style.

Try this:

function clickMe() {
  document.getElementById('message').innerHTML = "class";
  document.getElementsByClassName("loader")[0].style.visibility = 'visible';
}

.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);
  }
}

<h2>How To Create A Loader</h2>

<div  style="visibility : hidden"></div>
<p><button onclick="clickMe(); return false;">Make loader visible</button></p>
<div id="message" style="color:green">test to unhide loader</div>

CodePudding user response：

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

getElementsByClassName returns a list thus you need to reference which one you want with [0]. also need to set style

<!DOCTYPE html>
<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.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); }
}


</style>
</head>
<body>

<h2>How To Create A Loader</h2>

<div  style = "visibility : hidden"></div>  
 <p><button onclick="clickMe(); return false;">Make loader visible</button></p> 
  <div id="message" style="color:green">test to unhide loader</div>  


</body>
<script>
      function clickMe() {
      document.getElementById('message').innerHTML = "class"; 
      
        document.getElementsByClassName("loader")[0].style.visibility = 'visible';
      }

       
    </script>

</html>