When I have this in the page markup it works fine:

<script type="text/javascript">
    function bought1()
    {
        var s = '<%= Button2.ClientID %>';
        var v = document.getElementById(s);
        v.click();
    }    
</script>

But when I have the same thing in a separate file, even though the function is executed - the value of v remains null.

I tried with a simple div and it did find the div.

Why doesn't it find the ASP Button?

EDIT

I even added ClientIDMode="Static" to the Button. No change.

When I have this in the page markup it works fine:

<script type="text/javascript">
    function bought1()
    {
        var s = '<%= Button2.ClientID %>';
        var v = document.getElementById(s);
        v.click();
    }    
</script>

But when I have the same thing in a separate file, even though the function is executed - the value of v remains null.

I tried with a simple div and it did find the div.

Why doesn't it find the ASP Button?

EDIT

I even added ClientIDMode="Static" to the Button. No change.

• javascript
• html
• asp
• asp-4.0

• You checked the actual rendered html on both pages? – Darren Wainwright Commented Jul 17, 2013 at 14:49
• @Darren I checked with IE and FF js debuggers - they both give a null for v. – ispiro Commented Jul 17, 2013 at 14:53
• An immediate "fix" would be to give it a class and target that class. When put in a separate JS file, the <%= Button2.ClientID %> does not get evaluated because JavaScript files are not evaluated by the ASP.NET server - they are served statically. – Ian Commented Jul 17, 2013 at 14:53
• @ispiro - i mean view the actual source. See what gets rendered for var s = '<%= Button2.ClientID %>'; etc... – Darren Wainwright Commented Jul 17, 2013 at 14:54
• also, as @ian says - the server tags <% %> won't work in a separate .js file. – Darren Wainwright Commented Jul 17, 2013 at 14:55

4 Answers 4

<%= Button2.ClientID %> is a server code. You cannot run server code in a separate javascript file.

If you want to access Server Control ID from separate javascript, you need to make the ClientIDMode to either preditable or static.

Here is an example.

The following is a code. It is not a good example, but I hope you get the idea.

Note: Make sure you do not have same Ids when you use ClientIDMode="Static". Otherwise, Ids will collide. For example, one in master page and one in content page.

ASPX

<script src="/JavaScript1.js"></script>
<asp:Button runat="server" ID="Button1" ClientIDMode="Static" 
    Text="I am a button" />
<div onclick="bought1()">Click Me</div>

Javascript File

function bought1() {
    var s = 'Button1';
    var v = document.getElementById(s);
    v.click();
}

Win is correct, your separate JS file will not be rendered by ASP.

However, if you simply put

<script type="text/javascript">
        var s = '<%= Button2.ClientID %>';
</script>

above where you load your external file, you will load the value into a global on the page that will be accessible from any scripts loaded after it. Just make sure to give it a name that wont collide with any libraries you have loaded.

You should Change the function like this:

function bought1(clientId)
{
    var s = clientId;
    var v = document.getElementById(s);
    v.click();
}    

and would call it in your page markup:

bought1('<%= Button2.ClientID %>')

Alternatively, if you want to avoid the messiness of JS globals and dumping asp variables altogether, just wrap your button and use a queryselector (or jquery, etc) to grab it:

asp:

<div id="button-container">
        <asp:Button ID="button" runat="server" />
</div>

JS:

<script type="text/javascript">
    function bought1()
    {
        var v = document.querySelector("#button-container input");
        v.click();
    }    
</script>