How to Call a JS function using OnClick event
I am trying to call my JS function that I added in the header.
Please find below code that shows my problem scenario.
Note: I don't have access to the body in my application.
Everytime I click on the element with id="Save" it only calls f1() but not fun(). How can I make it call even my fun()?
Please help.
<!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>
Answer
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.
}
}