动态客户端 ID 的 document.getElementById 遇到问题

Question

在传递动态创建的字符串作为 document.getElementById 的 clientID 时，您是否需要做任何特别的事情？

我有一个 asp:gridview 控件，它有一个文本框列和一个复选框列。我在复选框中添加了一个 onclick 事件，以将该行的文本框值设置为所有选中行的最大值 +1。我传入网格的 ID 和所选行的控件。对于这些控件，我可以很好地 getElementByID，但是当我动态构建其他控件的 ID 时，即使我知道 ID 是正确的，我仍然会得到 null。我的代码如下。

function SetPriority(cbID, tbID, gridID) {
    var cb = document.getElementById(cbID);
    if (cb.checked) {
        var tb = document.getElementById(tbID);
        var grid = document.getElementById(gridID);

        var maxv = 0;

        for (var i = 0; i < grid.rows.length; i++) {
            var indexID = 102 + i;
            var cbClientID = 'LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ct' + indexID + '_chkGroup';
            var tbClientID = 'LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ct' + indexID + '_txtPriority';

            console.log("row" + i);

            //just for example of how it should be working
            console.log(cbID);
            var cbx = document.getElementById(cbID);
            console.log(cbx);

            //get row checkbox
            console.log(cbClientID);
            var thisCB = document.getElementById(cbClientID);
            console.log(thisCB);

            //get row textbox
            var thisTB = document.getElementById(tbClientID);
            console.log(thisTB);

            if (thisCB) {
                if (thisCB.type == "checkbox") {
                    if (thisCB.checked) {
                        if (thisTB.value > maxv)
                            maxv = thisTB.value;
                    }
                }
            }

        }
        tb.value = parseInt(maxv) + 1;
    }
}

这是它在控制台中的显示方式，您可以在其中看到第一行的 ID 相同

对于那些想知道如何调用该函数的人，我将其添加到行数据绑定上的 .net gridview 控件中的复选框中。呈现如下：

<input id="LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_chkGroup" type="checkbox" name="LeaveInfo$pnlMain$wgbLeaveSummary$gridSubmitted$ctl02$chkGroup" onclick="javascript:SetPriority('LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_chkGroup','LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted_ctl02_txtPriority','LeaveInfo_pnlMain_wgbLeaveSummary_gridSubmitted');">

vb .net代码添加函数是这样...(on-_RowDataBound)

        Dim chk As CheckBox = CType(e.Row.FindControl("chkGroup"), CheckBox)
        Dim tb As TextBox = CType(e.Row.FindControl("txtPriority"), TextBox)

        chk.Attributes.Add("onclick", String.Format("javascript:SetPriority('{0}','{1}','{2}');", chk.ClientID, tb.ClientID, gridSubmitted.ClientID))

Answer 1

不，您不必在动态构建字符串时做任何特别的事情。无论是动态构建的还是直接在代码中指定的，javascript 中的字符串都是相同的字符串。如果 document.getElementById() 不起作用，则可能是以下原因之一：

1. 您的字符串不是您认为的那样，因此它与目标 ID 不匹配。
2. 您的 DOM id 不是您想象的那样。
3. 您有多个具有相同 id 的元素（这里不太可能，因为您不会得到 null）
4. 在 DOM 准备好之前或在将所需元素添加到 DOM 之前，您正在调用 getElementById()。

在这种情况下，1) 或 2) 似乎更有可能是这里的问题，但您没有向我们展示任何上下文来知道 4) 是否可能是问题。

Answer 2

不是 100% 确定，但我认为这可能是上下文问题。试试这个：

           function ( id ) {

            var ID  = document.getElementById;
            this.id = id;
            this.newvar = ID.call( document, this.id );

                  ... 

                }

此外，这个问题可能会对您有所帮助——它对上下文有很好的解释，并将 var 分配给 getElementById Why can't I directly assign document.getElementById to a different function?

Answer 3

我不明白为什么我的 ID 看起来相同，但不是。我将把这个问题留给任何人，让他们了解如何解决这个问题。我最终只是通过单元格而不是 ID 获取我的元素。

function SetPriority(cbID, tbID, gridID) {
    var cb = document.getElementById(cbID);
    if (cb.checked) {
        var tb = document.getElementById(tbID);
        var grid = document.getElementById(gridID);

        var maxv = 0;

        if (grid.rows.length > 0) {
            for (row = 1; row < grid.rows.length; row++) {
                var thisCB = grid.rows[row].cells[5].childNodes[1];
                if (thisCB == cb) {
                    continue;
                }
                var thisTB = grid.rows[row].cells[6].childNodes[1];

                if (thisCB.type == "checkbox") {
                    if (thisCB.checked) {
                        if (thisTB.value > maxv)
                            maxv = thisTB.value;
                    }
                }
            }
        }

        tb.value = parseInt(maxv) + 1;
    }
}