How to call a JS function using OnClick event
forms, html, javascript
Solution
You are attempting to attach an event listener function before the element is loaded. Place `fun()` inside an `onload` event listener function. Call `f1()` within this function, as the `onclick` attribute will be ignored.
function f1() {
alert("f1 called");
//form validation that recalls the page showing with supplied inputs.
}
window.onload = function() {
document.getElementById("Save").onclick = function fun() {
alert("hello");
f1();
//validation code to see State field is mandatory.
}
}
JSFiddle
Problem
I am trying to call my JS function that I added in the header. Please find below the code that shows my problem scenario. Note: I don't have access to the body in my application. Every time I click on the element with `id="Save"` it only calls `f1()` but not `fun()`. How can I make it call even my `fun()`? ``` <!DOCTYPE html> <html> <head> <script> document.getElementById("Save").onclick = function fun() { alert("hello"); //validation code to see State field is mandatory. } function f1() { alert("f1 called"); //form validation that recalls the page showing with supplied inputs. } </script> </head> <body> <form name="form1" id="form1" method="post"> State: <select id="state ID"> <option></option> <option value="ap">ap</option> <option value="bp">bp</option> </select> </form> <table><tr><td id="Save" onclick="f1()">click</td></tr></table> </body> </html> ```