In this JavaScript Tutorial, we will learn how to link the external JavaScript file (.js) with the HTML File. Once linked, the HTML file can access the functions exposed in the .js JavaScript File.
23a JavaScript in External File.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE HTML> <HTML> <HEAD> <TITLE>Learn Java Script</TITLE> <Script src="FormEventHandler.js"></Script> </HEAD> <BODY> <H1> JavaScript Function - Return Value </H1> <br/> Enter Number 1: <input type="text" id="Number1" value="5"/> <br/> Enter Number 2:<input type="text" id="Number2" value="2"/> <br/> <Input type="button" value="Add" onclick="addNumbers()"/> <br/> <h3 id="h3Out" style="color:brown"> </h3> </BODY> </HTML> |
23b FormEventHandler.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
function getSum(Number1, Number2) { return (Number1 + Number2); } function addNumbers() { var result; var num1 = document.getElementById("Number1").value; var num2 = document.getElementById("Number2").value; //Pasrse it to number. Or you will get 52 (String Append) num1 = parseInt(num1); num2 = parseInt(num2); result = getSum(num1, num2); document.getElementById("h3Out").innerHTML = result; } |
Categories: JavaScript-Tube