How to call a JavaScript Function in Html

To invoke a JavaScript function within an HTML document, it is necessary to adhere to the following guidelines. By following these steps, the JavaScript function can be effortlessly utilized.

Step 1: To begin, we need to insert the script tag between the opening and closing <head> tags immediately following the title tag. Subsequently, proceed to define the JavaScript function.

Example


<Head>    

<Title>   

Call a JavaScript function

</Title>

<script type = "text/javascript">

         function msgprint() {

            alert("You are Successfully Called the JavaScript function");

         }

</script>

</Head>

Step 2: Next, we need to invoke the JavaScript function in the HTML code to showcase the data on the webpage. This involves calling the JavaScript function using its name within the input tag of the form element.

Example


<form>

         <input type = "button" onclick = "msgprint()" value = "Message Print"> 

      </form>

Step 3 involves saving the HTML file and executing it to trigger the JavaScript function.

Example


<!Doctype Html>

<Html>   

<Head>    

<Title>   

Call a JavaScript function

</Title>

<script type = "text/javascript">

         function msgprint() {

            alert("You are Successfully Called the JavaScript function");

         }

</script>

</Head>

<Body> 

<p>Click on the following button for calling the function: </p>      

      <form>

         <input type = "button" onclick = "msgprint()" value = "Message Print"> 

      </form>     

      <p>

</Body> 

</Html>

The result of the HTML code provided above can be viewed in the screenshot displayed below:

Input Required