使用 javascript 更改 ASP:textbox 文本的正确代码

[ad_1]

我有一个带有 asp.TextBoxes 的 aspx 网络表单，供用户输入数字。
如果他们随后单击复选框，这些数字应更改为零。
问题是它们没有改变。
这些是文本框的示例 –

<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 表单的末尾
单击复选框时运行的 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 的网络日志[^]

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";
}