CODEWITHSUNDEEP
javascript
AyDee
AyDee

Reputation: 221

Auto trigger button javascript

I have this code:

document.getElementById('auth-button').addEventListener('click', authorize);

When my page load I want to trigger that without clicking the button.

This is my view

my View

When authorized button clicked this is the output

enter image description here

I want to auto click that button when my page load.

Upvotes: 1

Views: 4675

Answers (7)

Philb24
Philb24

Reputation: 67

Use one of the following: 

<body onload="script();">

or

document.onload = function ...

or

window.onload = function ...

Upvotes: 0

enhzflep
enhzflep

Reputation: 13089

None of the other answers offered thus far seem to take something into account - that the registered handler may in fact need to be aware of it's place in the DOM.

We could for instance, have a number of buttons that all call the same handler, with that handler manipulating the surrounding DOM. Simply calling authorize when the page loads will not be sufficient.

I've chosen to use DIVs instead of BUTTONs to demonstrate that the .click() method still works.

A far better way is to actually click the button, using javascript.

#1 Not working

function byId(id){return document.getElementById(id)}
function allByClass(clss){return document.getElementsByClassName(clss)}
// useful for HtmlCollection, NodeList, String types
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need


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

function onDocLoaded(evt)
{
	forEach(allByClass('mBtn'), addHandler);
	
	function addHandler(elem)
	{
		elem.addEventListener('click', authorize, false);
	}
	
	alert('hit a okay to call authorize');
	authorize();								// wont return from this call, since authorize relies on a valid 'this' value
}

function authorize(evt)
{
	this.classList.add('clicked');
	this.textContent = 'clicked';
}
.mBtn
{
	border: solid 1px #555;
	border-radius: 2px;
	display: inline-block;
}

.clicked
{
	color: #dddddd;
	pointer-events: none;
}
<div class='mBtn'>Try me</div><div id='btn2' class='mBtn'>Or me</div><div class='mBtn'>Or even, me</div>

#2 - Does work

function byId(id){return document.getElementById(id)}
function allByClass(clss){return document.getElementsByClassName(clss)}
// useful for HtmlCollection, NodeList, String types
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need


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

function onDocLoaded(evt)
{
	forEach(allByClass('mBtn'), addHandler);
	
	function addHandler(elem)
	{
		elem.addEventListener('click', authorize, false);
	}
	
	alert('hit okay to click the 2nd button with javascript');
	byId('btn2').click();								// will return from this call, since authorize relies on a valid 'this' value, and the btn gives it one.
}

function authorize(evt)
{
	this.classList.add('clicked');
	this.textContent = 'clicked';
}
.mBtn
{
	border: solid 1px #555;
	border-radius: 2px;
	display: inline-block;
}

.clicked
{
	color: #dddddd;
	pointer-events: none;
}
<div class='mBtn'>Try me</div><div id='btn2' class='mBtn'>Or me</div><div class='mBtn'>Or even, me</div>

Upvotes: 0

Sarath Kumar
Sarath Kumar

Reputation: 2353

you can use Document ready in jQuery, try this..

$( document ).ready(function() {
    authorize();
});

or this in javaScript..

window.onload = authorize;

NOTE: The load event fires at the end of the document loading process. At this point, all of the objects in the document are in the DOM, and all the images, scripts, links and sub-frames have finished loading.

Upvotes: 0

Brian Liu
Brian Liu

Reputation: 341

It would be easier to tigger authorize function directly on page load using window.onload which is better than document.onload, see window.onload vs document.onload

window.onload = authorize;

However, if you are thinking about triggering click programmatically which is not suggested since it won't work properly across browsers e.g. Safari doesn't work at all

Upvotes: 0

David Ng
David Ng

Reputation: 470

You can use addEventListener to the DOMContentLoaded event:

document.addEventListener('DOMContentLoaded', function() {
    authButton.click();
}, false);

Full example:

https://jsfiddle.net/7q0gxehk/1/

Upvotes: 1

mm759
mm759

Reputation: 1424

You can register authorize as handler to be called when the page is fully loaded:

$(document).ready(authorize);

This requires jQuery. The same can be achieved without jQuery this way:

window.addEventListener('load', authorize);

Upvotes: 0

shivgre
shivgre

Reputation: 1173

You could call the function authorize() on load of page using below code : 

document.addEventListener("DOMContentLoaded", function(event) { 
    authorize();
});

Upvotes: 0

Related Questions