Javascript - Auto click on a button on page load

Question

I am trying to auto click on a button with id btn on page load. This is my snippet.

<button id="btn">Click me</button>
<script>
document.getElementById('btn').click();
    alert("h")
</script>

How can I give an alert on page load? Pls help. Thanks.

Nishant Dixit · Accepted Answer · 2018-06-19T11:13:59.210

10

function test(){
   alert("Hi");
}

window.onload = function(){
  document.getElementById('btn').click();
  
var scriptTag = document.createElement("script");
scriptTag.src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js";
document.getElementsByTagName("head")[0].appendChild(scriptTag);
}

<button id="btn" onclick="test()">Click me</button>

edited Jun 19 '18 at 11:13

answered Jun 19 '18 at 10:06

Nishant Dixit

5,388
5
17
29

Unfortunately, In this, the alert function is running way before my page is loaded. – Reuben Rodriguez Jun 19 '18 at 10:17
place script at bottom of page or wrap an onload function? – zipzit Jun 19 '18 at 10:19
1

@ReubenRodriguez updated!. – Nishant Dixit Jun 19 '18 at 10:19
Thanks. Could you also pls tell how can I trigger another js on page load – Reuben Rodriguez Jun 19 '18 at 10:45
did you mean load Javascript ? – Nishant Dixit Jun 19 '18 at 10:48
@NishantDixit yes.. – Reuben Rodriguez Jun 19 '18 at 11:00
@ReubenRodriguez check now I am appending script tag in head on page load. – Nishant Dixit Jun 19 '18 at 11:14

Mitya · Answer 2 · 2018-06-19T10:16:23.040

Well the alert currently is happening on page load, because you haven't put it inside an event callback. You presumably meant:

//wait for DOM ready...
document.addEventListener('DOMContentLoaded', () => {

    //...get the button
    let btn = document.querySelector('#btn');

    //...bind the click event
    btn.addEventListener('click', () => { alert('hello'); }, false);

    //...trigger the click event on page enter
    btn.click();

}, false);

Note also the document ready handler, which waits for the DOM to be ready.

score 2 · Answer 3 · answered Jun 19 '18 at 10:20

If you want to give alert on page load than simply use this -

window.onload = function(){alert("I am loaded")};

But if you want to give an alert after page load also by clicking on button use this -

function autoClick(){
  alert("I am loaded and automatically clicked");
}
window.onload = function(){
  document.getElementById('autoClickBtn').click();
}

<button id="autoClickBtn" onclick="autoClick()">Click me</button>

Mr. Roshan · Answer 4 · 2018-06-19T10:22:14.163

1

Try this:-

   window.onload=function(){
      document.getElementById("btn").click();
      alert('Page Loaded')
    };
    function buttonClick(){
      alert("button was clicked");
     }

<button id="btn" onclick="buttonClick()">Click me</button>

edited Jun 19 '18 at 10:22

answered Jun 19 '18 at 10:11

Mr. Roshan

1,777
13
33

Clicking the button will do nothing. – Mitya Jun 19 '18 at 10:14
check the question plz before downvoting :-auto click on a button with id btn on page load. – Mr. Roshan Jun 19 '18 at 10:15
1

He means the button should trigger the alert. In your code, the button does nothing. – Mitya Jun 19 '18 at 10:16
yes call happens with button click but that happen with auto click not by manually – Mr. Roshan Jun 19 '18 at 10:18
@Utkanos answer Updated – Mr. Roshan Jun 19 '18 at 10:23

Javascript - Auto click on a button on page load

4 Answers4