Not able to access external Jscript File even after referencing?

Question

I'm a beginner trying my first program to add external jscript file in scr attribute of script tag, followed all steps as I searched but it's not working the way it should. Can someone please help me with this?

I have one aspx form, and one button onclick calling internal javascript function. I also have one button onclick calling external .js file function.

This is my aspx code

<head runat="server">
<script type="text/javascript" language="javascript" src="ExternalJScript.js">
function Myfunction()
{
    document.getElementById("htmlbutton").innerHTML = "This is Button from Javascript            function";
    alert("Hi Function Called from Javascript");   
}
</script>
<title></title>
</head>

<body>
<form id="form1" runat="server">
    <div>
    <button type="button" id="htmlbutton" onclick="Myfunction()">This is html button</button><br />
    <button type="button" id="Button1" onclick="ExternalJSFileFunction()" value="Call File">HI</button>
    </div>
</form>

And this is my .js code

ExternalJSFileFunction()
{
    alert("I m from external file");
}

My javascript function within aspx page working fine. But external is not. its gives me Microsoft JScript runtime error: Object expected. — Shilpa Gurnani, Jul 10 '12 at 14:59

danwellman · Answer 1 · 2012-07-10T19:46:37.617

There should not be code in between the script tags of an external script. Try changing it to:

<head runat="server">
    <script type="text/javascript" language="javascript" src="ExternalJScript.js"></script>
    <script type="text/javascript">
    function Myfunction()
    {
    document.getElementById("htmlbutton").innerHTML = "This is Button from Javascript            function";
    alert("Hi Function Called from Javascript");   
    }
    </script>
    <title></title>
    </head>

    <body>
    <form id="form1" runat="server">
<div>
<button type="button" id="htmlbutton" onclick="Myfunction()">This is html button</button><br />
<button type="button" id="Button1" onclick="ExternalJSFileFunction()" value="Call File">HI</button>
</div>
    </form>

Also, the Language attribute is deprecated and is not needed

Edit

It's because the function you are trying to call isn't actually a function because the function keyword is not used. Change the external file so that it is:

function ExternalJSFileFunction() 
{
    alert("I m from external file");
}

Then it will work

Additionally, there are some other tips as well:

If you're using the HTML5 doctype, you can also get rid of the type attribute on <script> elements too

Also have your opening curly braces on the same line as the function or conditional, so do:

function ExternalJSFileFunction() {

but not:

function ExternalJSFileFunction()
{

You should almost always add your scripts to the end of the page, just before the closing </body> tag for performance

Using the onclick attribute is also not the recommended way of attaching event handlers, you should use the proper addEventListener() method instead. If you need to support <= IE8 you'll need to use IE's older event API. Using a JS library. like jQuery, can really help out with this kind of stuff.

Thnks.. danwellman i did as per ur comment but still m getting same error :( — Shilpa Gurnani, Jul 10 '12 at 15:27
Hey Thanks alot :)) danwellman that helped me to solve the bug. I implemented even ur given tips. I using XHTML 1.0 that is i guess higher than HTML5 it gives warning if i dont write type attribute. — Shilpa Gurnani, Jul 11 '12 at 11:35
2. Curly Braces ye will follow hereafter.3. code after
tag yes it improves performance i checked. — Shilpa Gurnani, Jul 11 '12 at 11:43
4. eventListener yes i implemented, i noticed that element.addEvent('onclick',Myfunction) worked for IE6 and not for chrome and element.addEventListener('click',Myfunction,false) worked for chrome and not for IE so... i just read that watever code we write in web we need to make sure it should be compatible with all browsers So any other ?? — Shilpa Gurnani, Jul 11 '12 at 11:43
XHTML 1.0 is older than HTML5. Visual Studio gives a warning and green underline if you don't use the type attribute, but if you use an actual validator, like the W3C's validator, it does not give warnings — danwellman, Jul 11 '12 at 11:49

score 1 · Accepted Answer · answered Jul 10 '12 at 18:31

The function in your external JavaScript file is not defined properly.

It should look like this (I added the function keyword).

function ExternalJSFileFunction()
{
    alert("I m from external file");
}

You also need to make the changes that danwellman suggested in his answer.

Not able to access external Jscript File even after referencing?

2 Answers2