Including js file in html properly with functions

Question

i have 2 files....one html and one js....

html code:

<!DOCTYPE html
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <script type="text/javascript" src="external.js"></script>

    <title> Sign In And Registration Page </title>
</head>

<body>

    <div id="headerTag">
    </div>

    ///codes here....

</body>
</html>

js code: some functions here performed on click operation.....

 function onClickOperation ()
    {
        ///here codes..
    }

problem is that the functions are not being called...when i put the same js code in the html file directly, it works....what do i have to do to load those functions from separate js file?

Please add html tag where you are calling the function, and where do you have the two file, in the same dir o not ? — Ivan Fontalvo, Mar 01 '17 at 13:54

score 1 · Answer 1 · answered Mar 01 '17 at 13:58

external.js should have the code called after DOM has finished loading like so

document.addEventListener('DOMContentLoaded',function(){
// code here
});

or it should be included inside the body tag below the DOM elements it should interact with

score 0 · Answer 2 · answered Mar 01 '17 at 13:53

Try wrapping the script in the body and just before the </body> tag:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title> Sign In And Registration Page </title>
</head>
<body>

    <div id="headerTag">
    </div>

    ///codes here....
    <script type="text/javascript" src="external.js"></script>
</body>
</html>

Including js file in html properly with functions

2 Answers2