WebForms "mangles" the IDs you set to ensure they are unique across the entire page. This is particularly important in data-bound controls, where the same template can be repeated multiple times.
If you view the source of your page in the browser, you will see that your controls' IDs are not exactly equal to the ID you've set in the markup.
There are several options:
1) If your script is defined inline within the page, you can use an expression to pass the
ClientID
to the script:
<script type="text/javascript">
function MakeScoresZero() {
let Mins = document.getElementById("<%= TimeMins.ClientID %>");
Mins.Text = "0";
let Secs = document.getElementById("<%= TimeSecs.ClientID %>");
Secs.Text = "0";
}
</script>
2) If you're certain there will never be a conflict, set the
ClientIDMode
to
Static
:
<asp:TextBox CssClass="pcnt18right" type="number" min="0" style="width:10%; text-align:right" placeholder="00" ID="TimeMins" ClientIDMode="Static" runat="server"></asp:TextBox>
<asp:TextBox CssClass="pcnt18right" type="number" min="0" Style="text-align: left;" ID="TimeSecs" ClientIDMode="Static" runat="server"></asp:TextBox>
ClientIDMode in ASP.NET 4.0 - Rick Strahl's Web Log[
^]
3) Rather than looking for an exact match on the ID, look for an ID
ending with the expected value:
function MakeScoresZero() {
let Mins = document.querySelector("input[id^='TimeMins']");
Mins.Text = "0";
let Secs = document.querySelector("input[id^=TimeSecs']");
Secs.Text = "0";
}
Attribute selectors - CSS: Cascading Style Sheets | MDN[
^]
4) Use some other means to identify the target controls - for example, add a dummy CSS class, and select the element with that class.