web用户控件的getElementByID()不工作

getElementByID() for web user control not working?

本文关键字：工作 getElementByID 用户 控件 web      更新时间：2023-09-26

我已经制作了一个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>

这是numbrick .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() + ");");
            }
        }
    }

尝试替换你的函数:

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

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

getElementById应该从渲染的html中读取元素的ID

JSNumeric_Control.ClientID将返回控件的ClientID，如果控件被呈现到页面上。它的存在并不一定意味着最终页面上会有带有该ID的HTML。

例如，如果您创建一个控件，只输出两个按钮，您将为每个按钮提供不同的id，这些id与它们所在的控件不同。通常你可能会创建一个容器div，你会把周围的所有其他内容，你会给控件的ID，以方便查找，但这是没有理由存在的。

你应该做的是要么确保你的控件用你的控件的ID创建这个HTML容器，要么你应该特别引用你的控件内项目的客户端ID。

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

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

  1. 使用jquery选择器查找type = button和id以<%=JSNumeric_Control开头的所有输入。ClientID %>

  2. 添加两个新属性到您的控件- FirstButtonClientID和SecondButtonClientID，将为您提供您的按钮的客户端id。

  3. 创建自定义javascript对象，它将代表您的用户控件并提供必要的功能。

您很可能试图在加载DOM之前搜索它。尝试将代码放入onload处理程序中:

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

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

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