Question

我创建了一个web user control（。ascx），其中包含两个html textbox和两个input buttons，当我尝试document.getElementById('<%=ControlID.ClientID%>')时，它返回null。我怎么可能做错了？

源代码：

<script language="javascript" type="text/javascript">

    function intilize() {
        var x = document.getElementById('<%=JSNumeric_Control.ClientID%>');
    }

</script>

<table class="style1">
    <tr>
        <td >
        <My:UserInfoBoxControl ID="JSNumeric_Control" runat="server" />
            </td>
        <td>
            &nbsp;</td>
    </tr>
    <tr>
        <td colspan="2" style="text-align: center">
            <input id="Button1" type="button" value="button" onclick="intilize()" /><br />
            </td>
    </tr>
</table>

以下是Numbric.cs的代码，以下是使用的属性，在页面加载中我使用JavaScript为HTML输入分配所有事件：

public partial class NumricCounter : System.Web.UI.UserControl
    {
        public string defualtValue = "0";
        public double defaultIncrementValue = 1;
        public int defaultPrecsionValue = 0;

        public string Button_Add_ClientID
        {
            get { return Button_Add.ClientID; }
        }

        public string Button_Subtract_ClientID
        {
            get { return Button_Subtract.ClientID; }
        }

        //Set and Get for all these properties. (Code Omitted)
        public string Text;

        public double IncrementValue;

        public int PrecsionValue;

        public void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                Text_Output.Value = this.Text;
                Button_Add.Attributes.Add("onclick", "Add(" + IncrementValue.ToString() + "," + PrecsionValue.ToString() + ");");
                Button_Subtract.Attributes.Add("onclick", "Subtract(" + this.IncrementValue.ToString() + "," + this.PrecsionValue.ToString() + ")");
                Text_Output.Attributes.Add("onkeyup", "check(" + this.PrecsionValue.ToString() + ");");
            }
        }
    }

Answer 1

尝试更换您的功能：

function intilize() {
        var x = document.getElementById('<%=JSNumeric_Control.ClientID%>');
    }

用这个：

function intilize() {
        var x = document.getElementById('JSNumeric_Control');
    }

getElementById应该从rendored html中读取元素的ID。

Answer 2

如果控件的ClientID呈现给页面，

JSNumeric_Control.ClientID将返回该控件的ClientID。它的存在并不一定意味着最终页面上会有包含该ID的HTML。

例如，如果您创建一个只输出两个按钮的控件，您将为每个按钮提供与其所在控件不同的不同ID。通常您可以创建一个容器div。将放置您将提供控件ID的所有其他内容以便于查找，但没有理由存在。

您应该做的是确保您的控件确实使用您的控件的ID创建此HTML容器，或者您应该专门引用控件中项目的客户端ID。

var button1 = document.getElementById('<%=JSNumeric_Control.Button1.ClientID%>');

Answer 3

问题是在DOM中没有使用UserInfoBoxControl的Id = ClientID的元素。用户控件中的控件将包含其他ID，例如'JSNumeric_Control_Button1'，'JSNumeric_Control_TextBox1'等。如果您需要获取两个输入按钮，则可以执行以下操作之一：

使用jquery选择器查找type = button和id以＆lt;％= JSNumeric_Control.ClientID％＆gt;开头的所有输入
向您的控件添加两个新属性 - FirstButtonClientID和SecondButtonClientID，它们将为您提供按钮的clientID。然后你可以在javascript中使用它。
创建自定义javascript对象，该对象将代表您的用户控件并提供必要的功能。

Answer 4

您最有可能在加载之前尝试搜索DOM。尝试将代码放在onload处理程序中：

document.onload = function () {
    alert(document.getElementById('<%=ControlID.ClientID%>'));
}

这确保在实际加载所有DOM之前不执行代码。

Answer 5

//Button_Add is the control id inside the user control
var x = document.getElementByID(JSNumeric_Control.FindControl("Button_Add").ClientID);

用户控件的getElementByID（）不起作用？

5 个答案: