document.getElementById() returns NULL when called from external JS file

Question

I've looked through all the other questions/solutions related to this issue and can't find the solution.

I have a basic aspx page with a button. the OnClick calls a JS function. the Javascript function calls document.getElementById() which works. I then call a sub-function that lives in an external JA file and the same call fails. Why?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jstest.aspx.cs" Inherits="jstest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:CheckBox runat="server" ID="RunAtStartup" OnClick="function1();" text="Click Me" />
    </div>
    </form>

    <script>
    function function1()
    {
        if (document.getElementById("<%= RunAtStartup.ClientID %>") == null)
            alert('function1 null');
        else
            alert('function1 not null');
        function2();
    }
    </script>
    <script src="./function2.js"></script>
</body>
</html>

And the external javascript file function2.js is

    function function2() {
    if (document.getElementById("<%= RunAtStartup.ClientID %>") == null)
        alert('function2 null');
    else
        alert('function2 not null');
}

The result of clicking the button will show that function1 is 'not null' and function2 is 'null'.

I've tried passing document in as a parameter, that did not work. I tried to do a function2().bind(document), that did not work. I stepped through the javascript debugger and it looks like the document object in function1 is identical to the document object in function2.

Thanks in advance Michael

See the answer below. You're essentially mixing server side code <%= ...%> in your .js file. — EdSF
– EdSF, Commented Feb 4, 2017 at 20:12

Leo Wilson · Accepted Answer · 2017-02-04 20:01:28Z

3

The name of the element, from what I can tell, is created by the ASP.net preprocessor. Since the JS file isn't parsed in ASP.net, it treats the selector literally, rather than as a real element ID. Therefore, this script cannot be run from and external JS file. In the ASP file, it replaces

<%= RunAtStartup.ClientID %>

with an actual element ID. The external file is looking for something like this:

<span id="<%= RunAtStartup.ClientID %>"></span>

Again, it treats the ID as a literal string, as if you ran it on a server without ASP.net installed. My solution would probably be to store the ID in a variable in the ASP.net file, like this:

var id = "<%= RunAtStartup.ClientID %>";

Then, the external JS file could use the following:

var element = document.getElementByID(id);

The external JS file would, of course, have to be included after the variable id is created. Alternatively, an even better solution would be to pass the ID as a function parameter, like this:

function function2(id) {
    if (document.getElementById(id) == null)
        alert('function2 null');
    else
        alert('function2 not null');
}

The ASP.net file could call the file like this:

function2("<%= RunAtStartup.ClientID %>");

This allows all ASP.net tags to be parsed server-side before being delivered to the client with the JS code.

edited Feb 4, 2017 at 20:01

answered Feb 4, 2017 at 19:50

Leo Wilson

5031 gold badge5 silver badges16 bronze badges

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

2 Comments

WebDrive Over a year ago

Thanks...that makes perfect sense. ASP won't parse and process the .js files. Thanks for the answer!

Leo Wilson Over a year ago

@WebDrive Sure, no problem. Always happy to help!

Collectives™ on Stack Overflow

document.getElementById() returns NULL when called from external JS file

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related