.click() doesn't work on page load but works in console

Question

Here is my code:

<script>
  document.getElementById("test").click();
</script>

Is there a reason why it doesn't trigger the click(); on page load but when I do it in the console for on Firefox, it works. Why is that and how do I fix it?

EDIT: I have also tried this:

<script>
  $(document).ready(function() {
    $('#test').trigger('click');
 });
</script>

still doesn't work...

Are you trying to access the element before it's loaded in the DOM? — Spencer Wieczorek, Sep 17 '16 at 01:33
`window.addEventListener('load', function(){document.getElementById('test').click();}, false);` The problem is, the script executes before the browser has parsed the html and created the button. This code waits for the document to finish loading before trying to click the button. — enhzflep, Sep 17 '16 at 01:34
How is the element with that ID placed upon the page? Please show that to us so we can assist better (AND show your event handler perhaps?) — Mark Schultheiss, Sep 17 '16 at 01:37
@enhzflep this worked. please submit your comment as an answer so i can accept! — johnniexo88, Sep 17 '16 at 01:37
are you sure about including the `jquery` plugin(offline or online.) — caldera.sac, Sep 17 '16 at 12:57

CodeMySky · Answer 1 · 2016-09-17T01:42:04.043

Since you haven't post your whole page, I think the highest probability is that the "test" element is not loaded when the script is executed. If you want to ensure your scripts get's executed, you should use

$( document ).ready(function() {
    $("#test").click();
});

Working Example:

</!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script type="text/javascript">
        function printTest() {
            alert('test')
        }
    </script>
</head>
<body>
<script type="text/javascript">
    $( document ).ready(function() {
        $("#test").click();
    });
    // document.getElementById("test").click();
</script>
<button id="test" onclick="printTest()"> Click Me</button>
</body>
</html>

score 0 · Answer 2 · answered Sep 17 '16 at 01:42

Without seeing the rest of your code, I need to guess here. Given that your code fails when in the document, yet functions as expected when entered into the console after the page has loaded, it's reasonably safe to assume the DOM hasn't finished loading yet.

To deal with this, we attach a function to the load event of the window object. Once the HTML/CSS/JS files have been loaded and parsed, the event is fired. We handle that event by locating and clicking the desired button.

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
  document.getElementById('test').click();  
}

<button id='test' onclick='alert("you clicked the test button");'>Click me</button>

score 0 · Answer 3 · answered Sep 17 '16 at 13:04

keep in mind to include the jquery library befor you do others. this jquery google CDN provide different version of jquery online cdn. use one of them and hope following helps to you.

refer this working demo. ....

<html>
<head></head>
<title></title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<style>
#mybutton{
 width: 100px;
 height: 50px;
 color: white;
 background-color: orange;
 border: 0;
 border-radius: 5px;
 font-family: monospace;
 cursor: pointer;
}

</style>

<body>

<button id="mybutton">Click me to see th alert</button>



<script type="text/javascript">

$("#mybutton").click(function(){
 alert("jquery and click event is working fine. ...");
});


</script>
</body>

</html>

.click() doesn't work on page load but works in console

3 Answers3