'Click a button element on page load

I'm trying to auto-click a button to initiate a function when the html page loads. I've tried document.getElementById('watchButton').click and it doesn't seem to work, the button is not clicked. Any suggestions?

<div class="content">
        <div class="action-area ch30">
            <button class="button dh" id="watchButton">Start Geolocation Watch</button>
            <button class="button dh" id="refreshButton" >Refresh Geolocation</button>
        </div>

The javascript:

    run:function() {
    var that = this;
    document.getElementById("watchButton").addEventListener("click", function() {
        that._handleWatch.apply(that, arguments);
    }, false); 
    document.getElementById("refreshButton").addEventListener("click", function() {
        that._handleRefresh.apply(that, arguments);
    }, false);
},

Thanks!



Solution 1:[1]

I'd put it inside document.ready (so it doesn't fire until the DOM loads) and use jQuery syntax:

$(function() {
    $('#watchButton').click();
});

http://jsfiddle.net/isherwood/kVJVe/

Here's the same fiddle using jQuery syntax: http://jsfiddle.net/isherwood/kVJVe/4

That said, why not just name your function and call it directly?

Solution 2:[2]

It would be click() not click

document.getElementById("watchButton").click();

You would need to call it onload or after the function has run

Solution 3:[3]

try trigger

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

Solution 4:[4]

document.getElementById("studyOne").click();
$("#studyOne").trigger('click');

Put this in onload function. It worked for me.

Solution 5:[5]

window.onload = function () {
document.getElementById("watchButton").click(); };

Try this ^^

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 epascarello
Solution 3 Osama Jetawe
Solution 4 isherwood
Solution 5 Mark Kurti