Kode yang benar untuk mengubah ASP: teks kotak teks dengan javascript

Saya memiliki formulir web aspx dengan asp.TextBoxes bagi pengguna untuk memasukkan angka.
Jika mereka kemudian mengklik Kotak Centang, angka-angka ini akan berubah menjadi nol.
Masalahnya adalah mereka tidak berubah.
Ini adalah contoh dari TextBox –

<asp:TextBox CssClass="pcnt18right" type="number" min="0" style="width:10%; text-align:right" placeholder="00" ID="TimeMins" runat="server"></asp:TextBox>

<asp:TextBox CssClass="pcnt18right" type="number" min="0" Style="text-align: left;" ID="TimeSecs" runat="server"></asp:TextBox>

Ini adalah Kotak Centang –

<input type="CheckBox" id="LandingOver75m" class="regular-checkbox" onclick="MakeScoresZero()" runat="server" />

Apa yang saya coba:

JavaScript ditulis di akhir formulir web
Kode JavaScript yang dijalankan ketika Kotak Centang diklik disebut ‘MakeScoresZero()’. Saya menguji untuk melihat bahwa kode berjalan ketika kotak centang diklik dengan memasukkan baris dengan alert(“123”); di dalamnya sebagai baris pertama. Itulah satu-satunya jalur yang berfungsi.

<script type="text/javascript">
    function MakeScoresZero() {
        let Mins = document.getElementById("TimeMins");
        Mins.Text = "0";
        let Secs = document.getElementById("TimeSecs");
        Secs.Text = "0";
    }
  </script>

Daripada .Text saya juga mencoba .value, .innerHTML dan .textContent, semuanya tidak berhasil.

Bantuan apa pun dihargai karena saya telah menghabiskan waktu berhari-hari untuk hal ini dan ini sangat membuat frustrasi.

Solusi 1
Solusi 2

Solusi 1

Yang berikut ini harusnya berhasil –

JavaScript

<script type="text/javascript">
    function MakeScoresZero() {
        document.getElementById("TimeMins").value = 0;        
        document.getElementById("TimeSecs").value = 0;        
    }
  </script>

Solusi 2

WebForms “menghancurkan” ID yang Anda tetapkan untuk memastikan ID tersebut unik di seluruh halaman. Hal ini sangat penting dalam kontrol terikat data, dimana templat yang sama dapat diulang beberapa kali.

Jika Anda melihat sumber halaman Anda di browser, Anda akan melihat bahwa ID kontrol Anda tidak sama persis dengan ID yang Anda tetapkan di markup.

Ada beberapa pilihan:

1) Jika skrip Anda ditentukan sebaris di dalam halaman, Anda dapat menggunakan ekspresi untuk meneruskannya ClientID ke skrip:

ASPX

<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) Jika Anda yakin tidak akan pernah ada konflik, aturlah ClientIDMode ke Static:

ASPX

<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 di ASP.NET 4.0 – Log Web Rick Strahl[^]

3) Daripada mencari ID yang sama persis, carilah ID diakhiri dengan nilai yang diharapkan:

JavaScript

function MakeScoresZero() {
    let Mins = document.querySelector("input[id^='TimeMins']");
    Mins.Text = "0";
    let Secs = document.querySelector("input[id^=TimeSecs']");
    Secs.Text = "0";
}

Pemilih atribut – CSS: Cascading Style Sheets | MDN[^]

4) Gunakan beberapa cara lain untuk mengidentifikasi kontrol target – misalnya, tambahkan kelas CSS tiruan, dan pilih elemen dengan kelas tersebut.