Ehnoxx07 Ehnoxx07 - 3 months ago 5
Javascript Question

Selecting the clicked button to animate with class

I have 4 buttons on my page with a classname of .loadingButton to animate it with a spinning circle once clicked but somehow the first button is the only one which animates when clicked. Am I missing something? I only included two buttons in the snippet



$(function(){

var loadBtn = document.querySelector('.loadingButton');

var redir= function() {
loadBtn.innerHTML = "Go Mobile";
loadBtn.classList.add('spinning');

setTimeout(
function (){
loadBtn.classList.remove('spinning');
loadBtn.innerHTML = "Go Mobile";

}, 12000);
}

loadBtn.addEventListener("click", redir, false);
});

/*button loading*/
.loadingButton {
display: inline-block;
outline: none;
position: relative;
-webkit-transition: padding-right 0.3s ease;
transition: padding-right 0.3s ease;
}
.loadingButton.spinning {
padding-right: 40px !important;

}
.loadingButton.spinning:after {
content: '';
font-size:14px !important;
right: 6px;
top: 50%;
width: 0;
height: 0;
box-shadow: 0px 0px 0 1px #fff;
position: absolute;
border-radius: 50%;
-webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease;
animation: rotate360 .5s infinite linear, exist .1s forwards ease;
}
.loadingButton.spinning:before {
content: "";
width: 0px;
height: 0px;
border-radius: 50%;
right: 6px;
top: 50%;
position: absolute;
border: 2px solid #fff;
border-right: 3px solid #fff;
-webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease ;
animation: rotate360 .5s infinite linear, exist .1s forwards ease ;
}
@-webkit-keyframes rotate360 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes rotate360 {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes exist {
100% {
width: 15px;
height: 15px;
margin: -8px 5px 0 0;
}
}
@keyframes exist {
100% {
width: 15px;
height: 15px;
margin: -8px 5px 0 0;
}
}
.mybutton {
background-color: #F89011;
padding: 9px;
font-size: 20px !important;
color: white !important;
width: 147.578px;
height: 43px;
position: relative;
right: -98px !important;
float: right !important;
}
input.radius,input.maps,input.diy,input.ctc {
height: 43px;
width: 410px !important;
background-color:#EFEFEF !important;
text-indent: 10px !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="radius" id="presale-url" placeholder="Enter URL" type="url" name="site_url" required="">
<button type="button" id="presale-button" class="1921549220 loadingButton mybutton">
Go&nbsp;Mobile
</button>


<input class="radius" id="presale-url-dt" placeholder="Enter URL" type="url" name="site_url" required="" style="background-color:white !important;">
<button type="button" id="presale-button-dt" class=" loadingButton mybutton">
Go&nbsp;Mobile
</button>




Answer

I think we can simplify your JavaScript a bit. Something like this:

$(".loadingButton").click(function(){
    $(this).addClass("spinning")
    setTimeout(function(){ $(".loadingButton").removeClass("spinning") }, 12000);
});
/*button loading*/
.loadingButton {
  display: inline-block;
  outline: none;
  position: relative;
  -webkit-transition: padding-right 0.3s ease;
  transition: padding-right 0.3s ease;
}
.loadingButton.spinning {
  padding-right: 40px !important;

}
.loadingButton.spinning:after {
  content: '';
   font-size:14px !important;
  right: 6px;
  top: 50%;
  width: 0;
  height: 0;
  box-shadow: 0px 0px 0 1px #fff;
  position: absolute;
  border-radius: 50%;
  -webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease;
          animation: rotate360 .5s infinite linear, exist .1s forwards ease;
}
.loadingButton.spinning:before {
  content: "";
  width: 0px;
  height: 0px;
  border-radius: 50%;
  right: 6px;
  top: 50%;
  position: absolute;
  border: 2px solid #fff;
  border-right: 3px solid #fff;
  -webkit-animation: rotate360 .5s infinite linear, exist .1s forwards ease ;
          animation: rotate360 .5s infinite linear, exist .1s forwards ease ;
}
@-webkit-keyframes rotate360 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes rotate360 {
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@-webkit-keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}
@keyframes exist {
  100% {
    width: 15px;
    height: 15px;
    margin: -8px 5px 0 0;
  }
}
.mybutton {
    background-color: #F89011;
    padding: 9px;
    font-size: 20px !important;
    color: white !important;
    width: 147.578px;
    height: 43px;

    position: relative;

    float: right !important;
}
input.radius,input.maps,input.diy,input.ctc  {
    height: 43px;
    width: 410px !important;
    background-color:#EFEFEF !important;
    text-indent: 10px !important;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<input class="radius" id="presale-url" placeholder="Enter URL" type="url" name="site_url" required="">
 <button type="button" id="presale-button" class="1921549220 loadingButton mybutton">
  Go&nbsp;Mobile
 </button>


 <input class="radius" id="presale-url-dt" placeholder="Enter URL" type="url" name="site_url" required="" style="background-color:white !important;">
 <button type="button" id="presale-button-dt" class="loadingButton mybutton">
  Go&nbsp;Mobile
 </button>