How to execute onclick methood inside javascript code

Question

I want execute onclick event after the 5 second timer gone and second button enabled.. Here is my code.

<a href="#" id="downloadvideo" onclick="OpenInNewTab();" class="btn btn-primary btn-lg">Download Video</a>

Javascript code

<script>
var towait = 5;
var selector = "#downloadvideo";

function counter() {
  if (towait == 0) {
    $(selector).text("Start Download");
    var srclink = '<?= $url;?>';
    $(selector).attr('href', srclink).prop('href', srclink).prop('disabled', false);
    return;
  }
  $(selector).text("Wait " + towait + " s").prop('disabled', true);
  towait--;
  setTimeout(counter, 1000);
}
$(selector).one('click', function(e) {
  counter();
  return false;
});
</script>

score 0 · Answer 1 · edited Oct 28 '21 at 10:59

Try to add setInterval and clearInterval functions to your code. Below is a simple 10 seconds timer just to demonstrate. For full disclosure, not all of the code is my own some of it I've copied from this answer.

var timeleft = 10; 

var b = document.querySelector('#btn');

b.addEventListener('click', () => {
var downloadTimer = setInterval(function(){
  if(timeleft <= 0){
    clearInterval(downloadTimer);
  }
  document.getElementById("progressBar").value = 10 - timeleft;
  timeleft -= 1;
}, 1000);
});

input[type='number'] {
    border: 0;
    font-size: 15px;
}

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <div>
    <button id='btn'>Click</button>
    <input type='number' value="0" max="10" id="progressBar"></input>
  </div>
</body>
</html>

can you tell, what changes i have to do in my ocde? – Dinesh chandra Oct 28 '21 at 11:07 — Dinesh chandra, Oct 28 '21 at 11:07

aerial · Answer 2 · 2021-10-28T13:29:00.223

0

You can do something like this. Just update the DownloadVideo function to what you need to happen when the 'Start Downloading' button is pressed.

EDIT: Using an <a> tag with a href instead.

let waitTime = 5 // Time to wait in seconds before download is available

const selector = document.getElementById('downloadvideo')

selector.onclick = () => {
  selector.textContent = 'Wait ' + waitTime + ' s'
  selector.disabled = true
  selector.onclick = () => {}
  const inter = setInterval(() => {
    waitTime--
    if (waitTime == 0) {
      clearInterval(inter)
      selector.textContent = 'Start Downloading'
      selector.href = 'https://www.google.com' // replace with the desired url
    } else {
      selector.textContent = 'Wait ' + waitTime + ' s'
    }
  }, 1000)
}

<button>
      <a id="downloadvideo" class="btn btn-primary btn-lg"> Download Video </a>
    </button>

edited Oct 28 '21 at 13:29

answered Oct 28 '21 at 11:12

aerial

1,188
3
7
15

Thanks, but Not Working. – Dinesh chandra Oct 28 '21 at 12:05
@Dineshchandra If you have the `OpenInNewTab()` function already defined in you code then try and change `selector.onclick = DownloadVideo` to `selector.onclick = OpenInNewTab` – aerial Oct 28 '21 at 13:10
I do same thing it open current page url in new tab instead of download url. – Dinesh chandra Oct 28 '21 at 13:15
@Dineshchandra I edited the answer. Now you just have to edit `selector.href = 'https://www.google.com'` and insert the url that you want instead of google. – aerial Oct 28 '21 at 13:29
Dude, i thought you didn't understand what i am trying to say. I have to two things there first have to download file as my current function doing, second thing on the same click i have another url which open's new site in new tab. So first it download file then second url open in new tab. Hope you understand. – Dinesh chandra Oct 28 '21 at 13:34

How to execute onclick methood inside javascript code

2 Answers2