Call Javascript function from HTML

Call Javascript function from HTML can be done in following ways

Call on button click
Call on form submission
Call on onload event
JavaScript function call with parameters

Call javascript function from HTML button click

Here in HTML, a button is created on the button’s click event a method hello() is called.

Fig: Alert function call on button click

 <!DOCTYPE html>
<html>
    <head>
        <script>
            function hello(){
            	alert('Hello Friends');
            }
        </script>
    </head>
    <body>
        <input type="button" value="click me" onclick="hello()"/>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function hello(){

alert('Hello Friends');

}

</script>

</head>

<body>

</body>

</html>

We have created input button which will show click me as specified in value. On click on button it will call hello().

We defined hello function in script tag.

To defined hello() we used function hello() and opening and closing {}.

Inside parenthesis we will write work of hello function.

Here we have defined only a alert box which will print Hello Friends.

Above examples shows how we mapped a button with JavaScript function.

Try It

Call on form submission

We are calling a method check() on form submission.

Whenever user click on submit button the method check() is get called.

<!DOCTYPE html>
<html>
    <head>
        <script>
            function check(){
            	alert('checking your form');
                return;
            }
        </script>
    </head>
    <body>
        <form onsubmit="check()">
            <label for="uname">User Name</label>
            <input type="text" name="uname" placeholder="User Name"/><br/><br/>
            <label for="password">Password</label>
            <input type="password" name="password" placeholder="Password"/><br/><br/>
            <input type="submit" value="Login"/>
        </form>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function check(){

alert('checking your form');

return;

}

</script>

</head>

<body>

<label for="password">Password</label>

</form>

</body>

</html>

We have a form tag inside form there are label and text box for User name and label and Password box and a submit button.

On click on submit form will call submit() JavaScript method.

Inside check function it will generate a alert box and show checking your form and come back to form.

Try It

HTML on onload event

Onload, event can be used to call a function when the page is loaded.

<!DOCTYPE html>
<html>
    <head>
        <script>
            function fun1(){
            	alert('calling on onload event');
            }
        </script>
    </head>
    <body onload="fun1()">
        <h2>Hello how are you</h2>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function fun1(){

alert('calling on onload event');

}

</script>

</head>

<h2>Hello how are you</h2>

</body>

</html>

to call a function on onload event we used <body onload="fun1()">.

When HTML document will load it will call JavaScript function fun1().

Try It

Html call javascript function with parameters

 <!DOCTYPE html>
<html>
    <head>
        <script>
            function add(a,b){
            	alert('Sum is '+(a+b));
            }
        </script>
    </head>
    <body>
        <input type="button" value="click me" onclick="add(2,3)"/>
    </body>
</html>

<!DOCTYPE html>

<html>

<head>

function add(a,b){

alert('Sum is '+(a+b));

}

</script>

</head>

<body>

</body>

</html>

Try It