How to Call a JS function using OnClick event
JavascriptHtmlFormsValidationHtml ValidationJavascript Problem Overview
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>
Javascript Solutions
Solution 1 - Javascript
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.
}
}
Solution 2 - Javascript
You could use addEventListener to add as many listeners as you want.
document.getElementById("Save").addEventListener('click',function ()
{
alert("hello");
//validation code to see State field is mandatory.
} );
Also add script
tag after the element to make sure Save
element is loaded at the time when script runs
Rather than moving script tag you could call it when dom is loaded. Then you should place your code inside the
document.addEventListener('DOMContentLoaded', function() {
document.getElementById("Save").addEventListener('click',function ()
{
alert("hello");
//validation code to see State field is mandatory.
} );
});
Solution 3 - Javascript
I removed your document.getElementById("Save").onclick =
before your functions, because it's an event already being called on your button. I also had to call the two functions separately by the onclick event.
<!DOCTYPE html>
<html>
<head>
<script>
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(); fun();">click</td></tr></table>
</body>
</html>
Solution 4 - Javascript
Using the onclick
attribute or applying a function to your JS onclick
properties will erase your onclick
initialization in <head>
.
What you need to do is add click events on your button. To do that you’ll need the addEventListener
or attachEvent
(IE) method.
<!DOCTYPE html>
<html>
<head>
<script>
function addEvent(obj, event, func) {
if (obj.addEventListener) {
obj.addEventListener(event, func, false);
return true;
} else if (obj.attachEvent) {
obj.attachEvent('on' + event, func);
} else {
var f = obj['on' + event];
obj['on' + event] = typeof f === 'function' ? function() {
f();
func();
} : func
}
}
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>
<script>
addEvent(document.getElementById('Save'), 'click', function() {
alert('hello');
});
</script>
</body>
</html>
Solution 5 - Javascript
You can also do this with an anonymous javascript function by using a iife. Please note that this is considered a bad practice, though there are those rare times when there is no other option.
...
<span onclick="(function() { // function code here })())">click me!</span>
...
Solution 6 - Javascript
Inline code takes higher precedence than the other ones. To call your other function func () call it from the f1 ().
Inside your function, add a line,
function fun () {
// Your code here
}
function f1()
{
alert("f1 called");
//form validation that recalls the page showing with supplied inputs.
fun ();
}
Rewriting your whole code,
<!DOCTYPE html>
<html>
<head>
<script>
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.
fun ();
}
</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>
Solution 7 - Javascript
I agree with @George. If we are to add or bind a event listener to an HTML element via JavaScript, we need to do once the DOM has been loaded. For this we can use the window.onload()
function in JavaScript.
<script>
window.onload = function() {
document.getElementById("Save").onclick = function fun() {
alert("hello");
}
}
</script>
Another way is to use the onclick
event handler in the HTML as in the following code:
<div onclick="myFunction()"></div>
<script>
function myFunction() {
alert("Hello");
}
</script>
Note: It is NOT recommended to use both the approaches together. As it will cause two functions to be called in a single click. Which is irksome.