Html Question posted in
Some basic documentation can be found here.

Html – how to stop onclick action on javascript?

When the button is clicked, I want the spiners to appear for 3 seconds and then disappear. i can make

visible but cant make invisible again

function stoploading() {
  document.getElementById('loading').style.visibility = 'visible';
}
<button class="btn btn-danger d-inline-flex align-items-center" type="button">ATTACK</button>

<div class="col text-white m-5 px-5">
  <div id="loading" class="spinner-border text-primary load_icon" role="status">
    <span class="visually-hidden">Loading...</span>
  </div>
</div>
Tags:

2

Answers


  1. 0

    So I created a <button> and a function startLoading()that removes the "Loading…" after 3 seconds.

    <button onclick="startLoading()">Click</button>

<script>
    function startLoading() {
        // Make he spinner visible
        document.getElementById('loading').style.visibility = 'visible';

        // Set a timeout to hide the spinner after 3 seconds
        setTimeout(function() {
            stopLoading();
        }, 3000);
    }

    function stopLoading() {
        // Make the spinner invisible
        document.getElementById('loading').style.visibility = 'hidden';
    }
</script>

<div class="col text-white m-5 px-5">
    <div id="loading" class="spinner-border text-primary load_icon" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>
    Login or Signup to reply.
  2. 0

    you may apply hidden style to loading after 3 second

    <button onclick="stoploading()">
    ATTACK
</button>

<script>
    function stoploading() {
        // Make the spinner visible
        document.getElementById('loading').style.visibility = 'visible';

        // Set a timeout to 3 seconds
        setTimeout(function () {
            document.getElementById('loading').style.visibility = 'hidden';
        }, 3000); 
    }
</script>

<div class="col text-white m-5 px-5">
    <div id="loading" class="spinner-border text-primary load_icon" role="status">
        <span class="visually-hidden">Loading...</span>
    </div>
</div>

    or you can also use classList.add(‘visible’); and classList.remove(‘visible’); to have same effects

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search