CODEWITHSUNDEEP
javascripthtmleventsbuttonfont-awesome
Birdman
Birdman

Reputation: 1524

Add icon to HTML button when clicked

Here's my button:

<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()"> myButton! </button>

In my handleMyButtonClick() function I have a bit of logic, but what I want to accomplish is to add a waiting icon while it's doing that logic. I found out how to do this with this code:

<i class="fa fa-spinner fa-spin"></i>

If I add that to my original button statement it works, but it's ALWAYS there. I only want this to show up when clicked. I'm trying to add the "i class" to the button within my JavaScript on click function. I've tried to use .classList.add() but I must be doing it wrong, or approaching it wrong entirely. How can I do this?

Upvotes: 2

Views: 16057

Answers (4)

Javapocalypse
Javapocalypse

Reputation: 2363

What you need to do is update the inner html of button in the beginning of your method handleMyButtonClick()

var btn = document.getElementById('myButton');
btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';

Then when you are done with your logic, reset the button back to the original state.

btn.innerHTML = 'myButton!';

Have a look at this complete code. Works just as you wanted. 

function handleMyButtonClick(){
 // Get button element
 btn = document.getElementById('myButton');
 
 // Set the spinner 
 btn.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';
 
 // Do the work. A sample method to wait for 3 second.
 setTimeout(function(){ 
 
 console.log("work done"); 
 
 // When the work is done, reset the button to original state
 btn.innerHTML = 'myButton!';
 
 }, 3000); 
 
}
<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()"> myButton! </button>

Upvotes: 6

Birdman
Birdman

Reputation: 1524

Thank you for all of your suggestions but I have a far simpler answer.

tempButton = document.getElementById('myButton'); //snag button
tempButton.innerHTML = '<i class = "fa fa-spinner fa-spin"></i> Please wait...';

I'm VERY new to web programming. Sorry I cannot explain for you, but this 1 line change the code of my button within my JavaScript on click function instantly.

Upvotes: 0

Rakesh Makluri
Rakesh Makluri

Reputation: 647

As javascript uses single thread, and if your code is synchronous, you will not be able to see the style change immediately. Once the execution of the method is finished, then it will renders the UI with new style. So, in your case, it wont' show any difference. As you are showing and hiding by the end of the function. If you want show the spinner you have to hide the spinner in setTimeout().

Try following:

<button type="button" id="myButton" class="myButtonCSS" onclick="handleMyButtonClick()">
   <i class="fa fa-spinner fa-spin"></i>

    myButton!
</button>

function handleMyButtonClick() {
    document.getElementById('myButton').classList.add('loading');

    // your logic goes here


    setTimeout(function() {
       document.getElementById('myButton').classList.remove('loading');
    }, 2000);

}

.myButtonCSS {
   position: relative;
}

.myButtonCSS .fa-spinner {
   display: none;
   position: absolute;
   left: 5px;
   top: 5px;// you can modify according to your button height and width
}

.myButtonCSS.loading .fa-spinner {
   display: inline-block;
}

Upvotes: 0

china veerreddy
china veerreddy

Reputation: 535

I guess this will work out for you please check

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>

<button type="button" id="myButton" class="" onclick="handleMyButtonClick()"> <span id='spin'></span>myButton! </button>

</body>
<script>
function handleMyButtonClick(){

$("#spin").addClass("fa fa-spinner fa-spin");

setTimeout(()=>{
//Do some logic 
$("#spin").removeClass("fa fa-spinner fa-spin");
},5000)
}
</script>
</html>

Upvotes: 2

Related Questions