Corriger le code pour changer ASP : texte de la zone de texte avec javascript

J’ai un formulaire Web aspx avec asp.TextBoxes pour que l’utilisateur puisse saisir des nombres.
S’ils cliquent ensuite sur une CheckBox, ces chiffres devraient devenir des zéros.
Le problème c’est qu’ils ne changent pas.
Ce sont des exemples de TextBoxes –

<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>

C’est la CheckBox –

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

Ce que j’ai essayé :

Le JavaScript est écrit à la fin du formulaire Web
Le code JavaScript qui s’exécute lorsque l’on clique sur CheckBox s’appelle « MakeScoresZero() ». J’ai testé pour voir que le code s’exécute lorsque la case est cochée en insérant une ligne avec alert(“123”); dedans comme première ligne. C’est la seule ligne qui fonctionne.

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

Au lieu de .Text, j’ai également essayé .value, .innerHTML et .textContent, le tout sans succès.

Toute aide est appréciée car j’ai passé des jours là-dessus et c’est très frustrant.

Solution 1
Solution 2

Solution 1

Ce qui suit devrait faire l’affaire –

Javascript

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

Solution 2

WebForms “mutile” les identifiants que vous définissez pour garantir qu’ils sont uniques sur toute la page. Ceci est particulièrement important dans les contrôles liés aux données, où le même modèle peut être répété plusieurs fois.

Si vous affichez la source de votre page dans le navigateur, vous verrez que les ID de vos contrôles ne sont pas exactement égaux à l’ID que vous avez défini dans le balisage.

Il existe plusieurs options :

1) Si votre script est défini en ligne dans la page, vous pouvez utiliser une expression pour transmettre le ClientID au scénario :

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) Si vous êtes certain qu’il n’y aura jamais de conflit, définissez le ClientIDMode à 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 dans ASP.NET 4.0 – Journal Web de Rick Strahl[^]

3) Plutôt que de chercher une correspondance exacte sur la pièce d’identité, recherchez une pièce d’identité se terminant par la valeur attendue :

Javascript

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

Sélecteurs d’attributs – CSS : Feuilles de style en cascade | MDN[^]

4) Utilisez d’autres moyens pour identifier les contrôles cibles – par exemple, ajoutez une classe CSS factice et sélectionnez l’élément avec cette classe.