如何为对应元素绑定JavaScript函数以正确显示错误提示

页面中有一组结构相同的元素，每个元素拥有独立ID，包含2个Textbox和1个Label，结构如下：

• Element 0
  • Textbox
  • Textbox
  • Label
• Element 1
  • Textbox
  • Textbox
  • Label
• Element 2
  • Textbox
  • Textbox
  • Label
    以此类推，共6个这类元素。

需求是用户在某个元素的Textbox输入内容时，在对应元素的Label中显示错误提示。目前给每个Textbox绑定了onkeydown事件：

MyTextbox.Attributes.Add("onkeydown", "javascript:OnChangeData();");

对应的JavaScript函数：

<script type="text/javascript">
    function OnChangeData() {
        var info = document.getElementById('<%= infoControl.ClientID%>');
        info.textContent = "Error !.";
    }
</script>

问题：无论操作哪个元素的Textbox，错误提示只会显示在最后一个元素的Label中。

问题根源 #

服务器端循环生成控件时，infoControl变量会被循环中的每个Label控件覆盖，最终页面渲染时，<%= infoControl.ClientID%>只会输出最后一个Label的ID，导致所有Textbox触发事件时都指向最后一个Label。

方法一：通过DOM上下文定位对应Label #

修改服务器端事件绑定代码，将当前Textbox的引用传递给函数：

MyTextbox.Attributes.Add("onkeydown", "javascript:OnChangeData(this);");

更新JavaScript函数，通过Textbox的父元素找到同组的Label：

<script type="text/javascript">
    function OnChangeData(textbox) {
        // 找到当前Textbox所属的Element容器（根据实际DOM结构调整closest的参数）
        var elementContainer = textbox.closest("li");
        // 在容器内找到Label（如果Label有类名，用querySelector(".your-label-class")更精准）
        var targetLabel = elementContainer.querySelector("label");
        
        if (targetLabel) {
            targetLabel.textContent = "Error !.";
        }
    }
</script>

方法二：传递元素索引定位对应Label #

如果每个元素的Label有规律的ID（比如infoControl_0、infoControl_1...），可以在绑定事件时传递元素索引：
假设服务器端循环时的索引为i，修改绑定代码：

MyTextbox.Attributes.Add("onkeydown", $"javascript:OnChangeData({i});");

更新JavaScript函数，根据索引拼接Label的ID：

<script type="text/javascript">
    function OnChangeData(elementIndex) {
        var targetLabel = document.getElementById(`infoControl_${elementIndex}`);
        
        if (targetLabel) {
            targetLabel.textContent = "Error !.";
        }
    }
</script>

内容的提问来源于stack exchange，提问作者huksfe