在javascript函数的参数上传递多个控件

我有一个JS方面：

        function recolor(ddl, hdf) {

        var ColorHDF = document.getElementById(hdf); //Error Undefined

        ddl.style.backgroundColor = 'White';
        ColorHDF.value = 'White';
    }

而Asp.net方面：

            <asp:DropDownList ID="DDL_NumCadreLA_1" onchange="recolor(this, 'HDF_NumCadreLA_1');"  runat="server" Width="40" CssClass="reducedSize" Enabled="false"></asp:DropDownList>
            <asp:HiddenField ID="HDF_NumCadreLA_1" Value="load" runat="server"></asp:HiddenField>

使用“this”很容易获得javascript函数上的控件，但我无法将Hiddenfield控件放入其中以更改其值，我应该如何获得它？（使用此代码时，ColorHDF未定义）

尝试如下操作

<asp:DropDownList ID="DDL_NumCadreLA_1" onchange="recolor(this, '<%= HDF_NumCadreLA_1.ClientID %>');"  runat="server" Width="40" CssClass="reducedSize" Enabled="false"></asp:DropDownList>

---

ASP.NET控件的

ID

属性与最终html页面上元素的ID不同。加载页面时，ASP.NET将为控件分配一个元素ID—请在浏览器中查看页面源。有一篇很好的博客文章解释了一些事情

对于一个简单的页面，每次加载页面时分配的ID可能都是相同的，但这是不可能保证的。要确保使用正确的元素ID调用Javascript，请在

onchange

中使用以下代码：

recolor(this, '<%= HDF_NumCadreLA_1.ClientID %>');

---

当ASP.NET呈现html时，它会根据您在.aspx中分配的逻辑ID将自己的ID分配给最终元素，这是一个问题。因此，生成的

id

将类似于

mainpage\u 0\u container\u 0\u HDF\u NumCadreLA\u 1

，因为通常您有一个嵌套的容器树

有几种方法可以解决这个问题。@Anik的答案中描述了两个a：禁止ASP.Net在渲染时修改id，提供真实的渲染后id。但是还有第三个选项。您可以通过id的一部分获取元素，了解制作id的模式：

var ColorHDF = document.querySelector('[id$=' + hdf + ']')[0];
//id should end with contents of hdf 'HDF_NumCadreLA_1'

---

这可以在您的代码中节省一些意大利面，但请注意，如果应用程序中的所有控件都没有正确命名，则此方法可能会失败，即不同控件上的控件可能与您的第一个解决方案Recolr一致（此“”）；ColorHDF仍然没有定义，但是ClientMode静态工作非常完美，感谢您的解释

<asp:HiddenField ID="HDF_NumCadreLA_1" ClientIDMode="Static" Value="load" runat="server"></asp:HiddenField>

var ColorHDF = document.querySelector('[id$=' + hdf + ']')[0];
//id should end with contents of hdf 'HDF_NumCadreLA_1'