Is there a way to extract the href URL along with a countdown timer?

Is it possible to create a button with a 10-second timer without using the onclick function? I want the button to start a countdown when clicked and after the countdown is complete, redirect to the URL specified in the href attribute. You can test this functionality by visiting this link.

var l = 0; function myFunction2(url1) {var tt1 = setInterval(function() {
    l = l + 1; var counter = 10 - l;
    button2.innerHTML = 'You will be redirected After:' + counter;
    if (counter === 0) { clearInterval(tt1); window.location = url1;    }
  }, 1000);}; var i = 0;
function myFunction(url) { var tt = setInterval(function() {
    i = i + 1; var counter = 10 - i;
    button1.innerHTML = 'You will be redirected After' + counter;
    if (counter === 0) {  clearInterval(tt); window.location = url; }
  }, 1000);};
#button2{padding: 10px;
    border:3px solid #eee;
    background: #27ae60;
    border-radius: 15px;
    width:  120px;
    cursor: pointer;
  }
#download2{text-decoration: none;
  font-size: 18px;text-align: center;
  color:#ffffff;  }
 #button1{
    text-decoration: none;
    padding: 10px;
    border:3px solid #eee;
    background:#2573a6;
    border-radius: 15px;
    width:  120px;
    cursor: pointer;
  }#download1{
  text-decoration: none;
  font-size: 18px;
  text-align: center;
  color:#ffffff;

}
<div class="pr3" id="second">
<button id="button1">
<a href="#" id="download1" onclick="myFunction('https://google.com')">Download</a>
</button>
<button id="button2">
<a href="#" id="download2" onclick="myFunction2('https://google.com.pk')">DEMO</a>
</button><br />

Answer №1

If you're looking to retrieve a specific attribute, use

element.getAttribute("href")
:

Answer №2

btn.onclick = function() {

var timer = setInterval(timerCount, 1000)
var t = 10;
function timerCount() {
                
                t--;
                if (t < 0) {
                                console.log("time is up");
                                                                window.location.href = url
                                clearInterval(timer)
                } else {
                                console.log(t)
                }
                
                
}
}

You may be able to figure out the rest of it on your own if you'd like:-)

Answer №3

If you find it necessary to include the href attribute in your button elements, here is how you can implement it:

document.getElementById("button2").addEventListener("click", demoHandler);

var l = 0;

function demoHandler(event) {

  let url = event.target.getAttribute('href');
  var tt1 = setInterval(function() {
    l = l + 1;
    var counter = 10 - l;
    button2.innerHTML = 'You will be redirected After:' + counter;
    if (counter === 0) {
      clearInterval(tt1);
      window.location = url;
    }
  }, 1000);
};
var i = 0;

function myFunction(url) {
  var tt = setInterval(function() {
    i = i + 1;
    var counter = 10 - i;
    button1.innerHTML = 'You will be redirected After' + counter;
    if (counter === 0) {
      clearInterval(tt);
      window.location = url;
    }
  }, 1000);
};
#button2 {
  padding: 10px;
  border: 3px solid #eee;
  background: #27ae60;
  border-radius: 15px;
  width: 120px;
  cursor: pointer;
}

#download2 {
  text-decoration: none;
  font-size: 18px;
  text-align: center;
  color: #ffffff;
}

#button1 {
  text-decoration: none;
  padding: 10px;
  border: 3px solid #eee;
  background: #2573a6;
  border-radius: 15px;
  width: 120px;
  cursor: pointer;
}

#download1 {
  text-decoration: none;
  font-size: 18px;
  text-align: center;
  color: #ffffff;
}
<div class="pr3" id="second">
  <button id="button1">
<a href="#" id="download1" onclick="myFunction('https://google.com')">Download</a>
</button>
  <button id="button2" href="https://www.stackoverflow.com.">DEMO</a>
</button><br />

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

differences between timestamp and timestamptz data types in PostgreSQL databases

When designing the backend of systems, I always make sure to store time in UTC. This means that when a client sends a date/time, it must be in UTC format. The client converts their local time to UTC before sending it over the network via an API. Once rece ...

Issue with my "message.reply" function malfunctioning in Discord.JS

I'm currently learning how to use discord.Js and I am facing an issue with my message.reply function not working as expected. I have set up an event for the bot to listen to messages, and when a message containing "hello" is sent, it should reply with ...

Steps to transfer Excel data to an HTML document

Apologies for my imperfect English, I'm currently working on a project involving HTML5, JavaScript, and CSS3. My task involves importing an Excel file into an HTML table. Any assistance you could provide would be greatly appreciated. Thank you in adva ...

Including a contact number on a smartphone's non-native app for iPhones and Androids

Looking to automate the process of adding a number to my contact list on both iPhone and Android devices. I am coding in Java, as well as using javascript and HTML5. Most solutions I have come across are for native apps. Does anyone know of a solution that ...

Can the execution of one endpoint in a Node.js Express API prevent access to another endpoint?

Hello there, I am currently diving into the world of Nodejs and Express and could use some guidance. Currently, I have set up two endpoints: /addcar and /viewcar Upon sending a post call to /addcar, I have created an infinite loop to continuously run. Ho ...

Serve HTML content with res.redirect() instead of changing the URL

I have a frontend code that makes a call to my backend using an XHR request. Here is the snippet of the code: var sendRequest = function(method, url, callback) { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readySt ...

Exploring the Fundamentals of jQuery Ajax Methods: Introduction to $.get, $.post, $.ajax, $.getScript, and More

Our website utilizes jQuery for ajax calls, using various methods such as $.get, $.getScript, and $.post. I am interested in implementing a session check for every ajax call. Rather than manually adding this check to each method call, is there a more effi ...

What is the best way to swap out the css selector using jQuery?

Looking to switch the height attribute to min-height This is how I usually update the value, but uncertain about changing the attribute $('.mySelector').css('height','650px') <div class="mySelector" style="cursor: -moz-g ...

How to Pass and Execute Asynchronous Callbacks as Props in React Components

I'm curious about the correct syntax for passing and executing async calls within React components. Specifically: Many times, I'll have a function that looks like this: const doAsync = async (obj) => { await doSomethingAsync(obj) } ...and ...

Encountered an error: data.map is not functioning as expected in the React component

Hi there, I've encountered a small issue with my modal component. The error message I'm getting is: Uncaught TypeError: meatState.map is not a function. Any suggestions on what may be causing this problem? Your assistance would be greatly appreci ...

Tips for searching an array in mongodb

Trying to implement a filtering mechanism on an array to query my MongoDB database Experimented with the elemMatch method to match exactly with the query, but encountered issues. Below is the schema for my shipment: const mongoose = require('mongoo ...

utilize css for a specific element's class

I am trying to style a specific label element, but I can't see the select element in the code because it is created at runtime. The label I want to apply my CSS to is nested within: form > section > div (which has the dataTables_length class ...

Require Assistance With Creating a Typing Animation in JavaScript?

Recently, I created a JavaScript text typer code: Here is the CSS: body { background-color: black; } #writer { font-family: Courier; font-size: 12px; color: #24FF00; background-color: black; } And here is the JavaScript: var text ...

Mastering the art of flawlessly executing kerning-generated code

I am facing a problem while implementing logotext with kerning technique in the <header> element. I found a useful tool made by Mr. Andrew which can be accessed through this link. Before making any modifications, I had the following code in the heade ...

Changing Image to Different File Type Using Angular

In my Angular Typescript project, I am currently working on modifying a method that uploads an image using the input element of type file. However, I no longer have an input element and instead have the image file stored in the assets folder of the project ...

Tips for designing a flexible structure with 2 columns, each containing an additional 2 columns within

Is it possible to create a 4-column responsive layout? | column left | column right | column left| column right| I would like to achieve a single row layout on larger devices as shown below | column left | column right | column left| column right| an ...

Using Selenium for Web Scraping: Identifying and interacting with a dropdown menu

Selenium version 3.141.0 I am currently developing a web scraping script that needs to interact with a dropdown menu using the Selenium webdriver. Unfortunately, I am facing difficulties in detecting this particular dropdown menu element. Despite attempti ...

Creating interactive tabs within the HTML document with AngularJS

Trying to customize the tab layout on my HTML page and I have a code similar to this: <form name="requestForm"> <div class="form-group col-md-6 md-padding"> <div class="text-primary"> <h3>Create Request</h3> ...

Focus on the iPad3 model specifically, excluding the iPad4

I am looking to apply specific CSS that works on iPad 3, but not on iPad 4, or vice versa. Currently, I am able to target both versions by using the following code: @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( m ...

After successfully developing my Vue.js application, I attempted to view it by running the command "npm run build" and opening the index.html file. However, I encountered an issue as

After running npm run build, the Dist folder was successfully created. However, when attempting to open index.html, an error is thrown: Failed to load resource: net::ERR_FILE_NOT_FOUND What could be causing this issue? ...