call javascript function located in main html from external js file

Question

sorry this problem might be resolved already, but I have not been able to find the answer.

I basically have 2 files:

form.html code:

<!DOCTYPE html>
<html>
<head>
<script src=".../fileA.js"></script>
<title>BACKUP MONITOR</title>
<script>
    function getEvents()
    {
        alert("getEvents");
    }

    alert("in HTML");
</script>
</head>
<body>
</body>
</html>

fileA.js code:

alert("in fileA");
getEvents();

Question 1:

I can't call getEvents() from fileA.js. Is there any way to do this?

Question 2:

Could I create a new Window from form.html and call getEvents() from there? please see code below:

New form.html code:

<!DOCTYPE html>
<html>
<head>
    <title>BACKUP MONITOR</title>
    <script>
        function getEvents()
        {
            alert("getEvents");
        }

        alert("in HTML");

        var w = window.open();

        var s = w.document.createElement("script");
        s.type = 'text/javascript';
        s.src = ".../fileA.js";
        w.document.body.appendChild(s);

        w.alert("New Window");
    </script>
</head>
<body>
</body>
</html>

thank you very much

You need to call it from an onload event since you load the javascript file before you define the getEvents function. Another option is to move the getEvents function above the fileA.js — NoGray
– NoGray, Commented Apr 13, 2014 at 6:13
Why not just move your JS from in the document into its own .js file? Then you can link to it easily, modify it simply, and reuse it easier if you need it later in life. — Outsider
– Outsider, Commented Apr 13, 2014 at 6:19
thank you NoGray, that worked for me, I have another question now. Can I create a new window from "form.html" add a js to it and call getEvents? I am going to edit my question to give an example — masber
– masber, Commented Apr 13, 2014 at 8:32

rts · Accepted Answer · 2014-04-13 06:29:38Z

1

Change the order in which your scripts load. Your external script .../fileA.js is loading before the getEvents function is defined in your embedded script. The call to getEvents in your external script can't succeed if the function doesn't exist yet.

form.html code:

<!DOCTYPE html>
<html>
<head>
<title>BACKUP MONITOR</title>
<script>
    function getEvents()
    {
        alert("getEvents");
    }

    alert("in HTML");
</script>
<script src=".../fileA.js"></script>
</head>
<body>
</body>
</html>

answered Apr 13, 2014 at 6:29

rts

1911 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user3296575 · Accepted Answer · 2014-04-13 06:19:07Z

0

Your code should be like this

<!DOCTYPE html>
<html>
<head>
<title>BACKUP MONITOR</title>
<script>
function getEvents()
{
    alert("getEvents");
}

alert("1");
var eventArray = getEventArray();

var w = window.open();
alert("2");
</script>
<script src=".../fileA.js"></script>
</head>
<body>
</body>
</html>

answered Apr 13, 2014 at 6:19

user3296575

214 bronze badges

Collectives™ on Stack Overflow

call javascript function located in main html from external js file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related