【解決方法】JavaScriptを使用してASP:textboxテキストを変更するための正しいコード

[ad_1]

ユーザーが数値を入力するための asp.TextBoxes を備えた aspx Web フォームがあります。
その後チェックボックスをクリックすると、これらの数値はゼロに変わります。
問題は、それらが変わらないことです。
これらは 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>

これはチェックボックスです –

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

私が試したこと:

JavaScript は Web フォームの最後に記述されます
CheckBox がクリックされたときに実行される JavaScript コードは、「MakeScoresZero()」と呼ばれます。チェックボックスをクリックしたときにコードが実行されることを確認するために、alert(“123”); の行を挿入してテストしました。最初の行としてその中にあります。それが機能する唯一の行です。

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

.Text の代わりに、.value、.innerHTML、.textContent も試しましたが、すべて成功しませんでした。

私はこれに何日も費やしており、非常にイライラしているので、助けていただければ幸いです。

解決策 1
解決策 2

解決策 1

以下はうまくいくはずです –

JavaScript

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

解決策 2

WebForms は、設定した ID を「マングル」して、ページ全体で一意であることを保証します。これは、同じテンプレートを複数回繰り返す可能性があるデータバインドコントロールでは特に重要です。

ブラウザーでページのソースを表示すると、コントロールの ID がマークアップで設定した ID と正確に一致していないことがわかります。

いくつかのオプションがあります。

1) スクリプトがページ内でインラインで定義されている場合は、式を使用して ClientID スクリプトに:

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) 競合が絶対に起こらないと確信できる場合は、 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>

ASP.NET 4.0 の ClientIDMode – Rick Strahl の Web ログ[^]

3) ID の完全一致を探すのではなく、ID を探します。 で終わる 期待値:

JavaScript

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