Código correcto para cambiar ASP: texto del cuadro de texto con javascript

[ad_1]

Tengo un formulario web aspx con asp.TextBoxes para que el usuario ingrese números.
Si luego hacen clic en una casilla de verificación, estos números deberían cambiar a ceros.
El problema es que no cambian.
Estos son ejemplos de cuadros de texto:

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

Esta es la casilla de verificación –

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

Lo que he probado:

El JavaScript está escrito al final del formulario web.
El código JavaScript que se ejecuta cuando se hace clic en CheckBox se llama ‘MakeScoresZero()’. Probé para ver que el código se ejecuta cuando se hace clic en la casilla de verificación insertando una línea con alert(“123”); en él como la primera línea. Esa es la única línea que funciona.

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

En lugar de .Text también probé .value, .innerHTML y .textContent, todo sin éxito.

Se agradece cualquier ayuda ya que he pasado días en esto y es muy frustrante.

Solución 1
Solución 2

Solución 1

Lo siguiente debería funcionar:

javascript

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

Solución 2

WebForms “destroza” los ID que usted establece para garantizar que sean únicos en toda la página. Esto es particularmente importante en controles vinculados a datos, donde la misma plantilla se puede repetir varias veces.

Si ve el código fuente de su página en el navegador, verá que los ID de sus controles no son exactamente iguales al ID que configuró en el marcado.

Hay varias opciones:

1) Si su script está definido en línea dentro de la página, puede usar una expresión para pasar el ClientID al guión:

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 está seguro de que nunca habrá un conflicto, configure el ClientIDMode a 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 en ASP.NET 4.0: registro web de Rick Strahl[^]

3) En lugar de buscar una coincidencia exacta en la identificación, busque una identificación terminando con el valor esperado:

javascript

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

Selectores de atributos – CSS: Hojas de estilo en cascada | MDN[^]

4) Utilice otros medios para identificar los controles de destino; por ejemplo, agregue una clase CSS ficticia y seleccione el elemento con esa clase.

[ad_2]