CODEWITHSUNDEEP
javascripthtml
Juan Diego
Juan Diego

Reputation: 11

How can i change link with delay after clicking it

maybe my question is silly and has a very simple answer, but I am new in HTML and javascript and I need your help. Actually is my first website that I'm creating...

Well, my problem is this. I have 2 links on my website 

<a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link</button></a>

<a id="second" href="http://example.com/second-link" target="_blank"><button class="btn-icon btn-icon-go">Second Link</button></a>

Initially, I need to display the first link button, when it's clicked that link button should disappear, a message saying "Checking..." should be displayed for 10 seconds, and then the second link button should appear.

So each of these 3 elements (button 1, message, button 2) should be visible one by one...

I don't know if it helps, but I am using jquery-1.10.2.js on my website.

Can any of you please help me with a solution?

Thank you in advance!

Upvotes: 1

Views: 1094

Answers (4)

Thatkookooguy
Thatkookooguy

Reputation: 7012

you can change all 3 buttons with adding a state class to the container element.

in the CSS:

  • show the #first link only on empty state (no class)
  • show the loading... link only on loading state
  • show the #third link only on ready state

Then, in the JavaScript, all you need to do is add\remove the right class:

first.onclick = (function() {
  container.classList.add('loading');

  return setTimeout(function() {

    container.classList.remove('loading');
    container.classList.add('ready');

  }, 5000);

});
.action-container:not(.loading) #second,
.action-container:not(.ready) #third {
  display: none
}

.action-container.loading #first,
.action-container.ready #first {
  display: none;
}
<div class="action-container" id="container">
  <a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link Click me</button></a>

  <span id="second">.... Wait 5s</span>

  <a id="third" href="#">YOUR LINK</a>
</div>

Upvotes: 1

NVRM
NVRM

Reputation: 13082

Something like this? This is pure javascript.

first.onclick = (function(){

  first.style.display = "none"
  
  second.style.display = "block"
  
  setTimeout(function(){
  
     second.style.display = "none"
    
     third.style.display = "block"
    
  },5000)
  
})
#second, #third {
 display: none
}
<a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link Click me</button></a>

<span id="second">.... Wait 5s</span>

<a id="third" href="#">YOUR LINK</a>

Upvotes: 4

Arber
Arber

Reputation: 541

Using jQuery, this would be also a possible way:

$('#first').on('click', function() {
  // Parent Element of the first button
  var parent = this.parentElement;
  
  // Show message
  $(parent).append('<p>Checking...</p>')
  
  // Remove first button
  $(this).remove();
  
  // Set html content of parent including only the second button (after 1 second)
  setTimeout(function() {
    $(parent).html('<a id="second" href="http://example.com/second-link" target="_blank"><button class="btn-icon btn-icon-go">Second Link</button></a>');
  }, 1000)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<a id="first" href="#" target=""><button class="btn-icon btn-icon-check">First Link</button></a>

Upvotes: 0

user7827042
user7827042

Reputation:

Just have all elements in the page, and show/hide based on your flow.

$('#first').on('click', function() {
  $(this).hide();
  $('#message').show();
  setTimeout(function() {
    $('#second').show();
    $('#message').hide();
  }, 10000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="first" href="http://example.com/first-link" target="_blank"><button class="btn-icon btn-icon-check">First Link</button></a>
<p id="message" style="display:none;">Checking...</p>
<a id="second" style="display:none;" href="http://example.com/second-link" target="_blank"><button class="btn-icon btn-icon-go">Second Link</button></a>

Upvotes: 2

Related Questions