How can I execute js functions onClick just after form is loaded

Question

I have a form and two buttons:

<input type="button" name="btn" onclick="a()" value="--->"><br>
<input type="button" name="btn" onclick="b()" value="<---">

In a javascript.js file I have:

function a(){
console.log("a");
}
function b(){
console.log("b");
}

I want to call function (just when I click buttons) but when document it is fully loaded. how can I do?

when document is load only the button is also load to click. This is not auto click option. — Abdulla Nilam, Aug 29 '16 at 07:25
Possible duplicate of [run function when page is loaded](http://stackoverflow.com/questions/4842590/run-function-when-page-is-loaded) — Martin Nyolt, Aug 29 '16 at 08:01

score 1 · Answer 1 · answered Aug 29 '16 at 07:28

1

Code included inside $( document ).ready() will only run once the page Document Object Model (DOM) is ready for JavaScript code to execute.

$(document).ready(function(){
     a(); //executes function a on DOM load
     b(); // executes function b on DOM load
});

You can also use $( window ).load(), which gets executed only after entire page (images or iframes), not just the DOM, is ready.

$(window).load(function(){
     a(); //executes function a on page load
     b(); // executes function b on page load
});

answered Aug 29 '16 at 07:28

Alok Patel

7,184
5
24
44

When I try `$(document).ready(function(){ a(); //executes function a on DOM load b(); // executes function b on DOM load });` I got: `TypeError: $(...).ready is not a function`. What is the problem.Sorry but I am noob in js. – ana.coman93 Aug 29 '16 at 07:36
You would need to include **jQuery**. Add `` before calling `$(document)` function. – Alok Patel Aug 29 '16 at 08:09

score 1 · Answer 2 · answered Aug 29 '16 at 07:28

You can use jquery's $(document).ready(function(){}); In your case :

<html>
<input type="button" name="nav_right_btn" id="a" value="--->"><br>
<input type="button" name="nav_right_btn" id="b" value="<---">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("#a").click(function(){ a(); });
    $("#b").click(function(){ b(); });
});
</script>
</html>

score 1 · Accepted Answer · answered Aug 29 '16 at 10:25

Ok. So I solved the problem. I just used:

document.observe('dom:loaded', function(){
a = function(){console.log("a");}
b = function(){console.log("b");}
});

And :

<input type="button" name="btn" onclick="a()" value="--->"><br>
<input type="button" name="btn" onclick="b()" value="<---">

If I click a button displays me "a", If I click on b button displays me "b". Everitime I press on it.(not just on load)

How can I execute js functions onClick just after form is loaded

3 Answers3