Mã đúng để thay đổi văn bản ASP:textbox bằng javascript

[ad_1]

Tôi có biểu mẫu web aspx với asp.TextBoxes để người dùng nhập số.
Sau đó, nếu họ nhấp vào Hộp kiểm, các số này sẽ thay đổi thành số 0.
Vấn đề là họ không thay đổi.
Đây là những ví dụ về 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>

Đây là Hộp kiểm –

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

Những gì tôi đã thử:

JavaScript được viết ở cuối biểu mẫu web
Mã JavaScript chạy khi Hộp kiểm được nhấp vào được gọi là ‘MakeScoresZero()’. Tôi đã kiểm tra xem mã có chạy khi hộp kiểm được nhấp vào bằng cách chèn một dòng có cảnh báo(“123”); trong đó là dòng đầu tiên. Đó là dòng duy nhất hoạt động.

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

Thay vì .Text, tôi cũng đã thử .value, .innerHTML và .textContent, tất cả đều không thành công.

Bất kỳ trợ giúp nào đều được đánh giá cao vì tôi đã dành nhiều ngày cho việc này và điều đó rất bực bội.

Giải pháp 1
Giải pháp 2

Giải pháp 1

Sau đây nên thực hiện thủ thuật –

JavaScript

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

Giải pháp 2

WebForms “xáo trộn” các ID bạn đặt để đảm bảo chúng là duy nhất trên toàn bộ trang. Điều này đặc biệt quan trọng trong các điều khiển ràng buộc dữ liệu, trong đó cùng một mẫu có thể được lặp lại nhiều lần.

Nếu bạn xem nguồn trang của mình trong trình duyệt, bạn sẽ thấy ID của các điều khiển không hoàn toàn bằng ID bạn đã đặt trong đánh dấu.

Có một số lựa chọn:

1) Nếu tập lệnh của bạn được xác định nội tuyến trong trang, bạn có thể sử dụng biểu thức để chuyển ClientID vào kịch bả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) Nếu bạn chắc chắn sẽ không bao giờ xảy ra xung đột, hãy đặt ClientIDMode ĐẾN 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 trong ASP.NET 4.0 – Nhật ký web của Rick Strahl[^]

3) Thay vì tìm kiếm sự trùng khớp chính xác trên ID, hãy tìm ID kết thúc với giá trị mong đợi:

JavaScript

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

Bộ chọn thuộc tính – CSS: Cascading Style Sheets | MDN[^]

4) Sử dụng một số phương tiện khác để xác định các điều khiển đích – ví dụ: thêm một lớp CSS giả và chọn phần tử có lớp đó.

[ad_2]