الكود الصحيح لتغيير نص ASP:textbox باستخدام جافا سكريبت

لدي نموذج ويب aspx مع asp.TextBoxes ليتمكن المستخدم من إدخال الأرقام.
إذا قاموا بعد ذلك بالنقر فوق CheckBox، فيجب أن تتغير هذه الأرقام إلى أصفار.
المشكلة هي أنهم لا يتغيرون.
هذه أمثلة على 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>

هذه هي خانة الاختيار –

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

ما حاولت:

تتم كتابة JavaScript في نهاية نموذج الويب
يُطلق على كود JavaScript الذي يتم تشغيله عند النقر فوق CheckBox اسم “MakeScoresZero()”. لقد اختبرت لأرى أن الكود يعمل عند النقر فوق مربع الاختيار عن طريق إدراج سطر به تنبيه (“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
الحل 3

الحل 1

ما يلي يجب أن يفعل الخدعة –

جافا سكريبت

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

الحل 2

تقوم WebForms “بتشويه” المعرفات التي قمت بتعيينها للتأكد من أنها فريدة عبر الصفحة بأكملها. وهذا مهم بشكل خاص في عناصر التحكم المرتبطة بالبيانات، حيث يمكن تكرار نفس القالب عدة مرات.

إذا قمت بعرض مصدر صفحتك في المتصفح، فسترى أن معرفات عناصر التحكم الخاصة بك لا تساوي تمامًا المعرف الذي قمت بتعيينه في الترميز.

هناك عدة خيارات:

1) إذا تم تعريف البرنامج النصي الخاص بك بشكل مضمن داخل الصفحة، فيمكنك استخدام تعبير لتمرير ClientID إلى البرنامج النصي:

أسبكس

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

أسبكس

<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 في ASP.NET 4.0 – سجل الويب الخاص بـ Rick Strahl[^]

3) بدلاً من البحث عن تطابق تام في المعرف، ابحث عن المعرف وتنتهي مع القيمة المتوقعة:

جافا سكريبت

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

محددات السمات – CSS: أوراق الأنماط المتتالية | MDN[^]

4) استخدم بعض الوسائل الأخرى لتحديد عناصر التحكم المستهدفة – على سبيل المثال، قم بإضافة فئة CSS وهمية، ثم حدد العنصر الذي يحتوي على تلك الفئة.

الحل 3

رائع! كل شيء يعمل الآن. شكرا جزيلا لكم جميعا.
لقد استخدمت ClientIDMode = “Static” للكائنات التي يجب تغيير القيم فيها. يتضمن ذلك ثلاثة asp:TextBox(es) وasp:DropDownList.
ثم أصبحت JavaScript بسيطة جدًا.

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