将控制作为参数传递给javascript函数答案

【问题标题】：Passing control as parameter to javascript function将控制作为参数传递给javascript函数
【发布时间】：2011-09-27 08:14:38
【问题描述】：

我正在尝试将控件的 id 传递给一个 javascript 函数，该函数将它的值（控件是一个文本框）添加到一个列表框，但显然我没有做对，有人可以纠正我。

谢谢。

<input type="button" ID="btnAddtoLstBox" value="" title="Add this to the list" onclick="javascript:addToList(document.getElementById(btnAddtoLstBox));"
class="ui-icon ui-icon-refresh ui-corner-all" style="width: 20px; height: 20px; background-position: -64px 80px"  />

  // scripts to add list items
        function addToList(varTxtBox) {

                 // get the list box
                var lb = document.getElementById("uilstMemTypeTier");

                // get the text to add
                var toAdd = varTxtBox.value;

                if (toAdd == "") return false;

                // look for the delimiter string. if found, alert and do nothing
                if (toAdd.indexOf(delim) != -1) {
                    alert("The value to add to the list cannot contain the text \"" + delim + "\" as it is used as the delimiter string.");
                    return false;
                }

                // check if the value is already in the list box
                for (i = 0; i < lb.length; i++) {
                    if (toAdd == lb.options[i].value) {
                        alert("The text you tried to add is already in the list box.");
                        return false;
                    }
                }

                // add it to the hidden field
                document.getElementById("<%=uihdnlistBasedFieldsListItems.ClientID%>").value += toAdd + delim;

                // create an option and add it to the end of the listbox
                lb.options[lb.length] = new Option(toAdd, toAdd);

                // clear the textfield and focus it
                varTxtBox.value = "";
                varTxtBox.focus();
            }

【问题讨论】：

您遇到错误了吗？哪个位不工作？
另外，delim 变量是否在封闭范围内并已定义？

标签： javascript asp.net vb.net

【解决方案1】：

将onclick="javascript:addToList(document.getElementById(btnAddtoLstBox));" 更改为onclick="addToList(document.getElementById('btnAddtoLstBox'));" 或onclick="addToList(this);"

【讨论】：

怎么样？

【解决方案2】：

如果您使用的是控制事件处理程序，您可以提供this 并且它是控制：

 onclick="addToList(this)"

代码：http://jsfiddle.net/ARBHj/

【讨论】：

【解决方案3】：

你也可以通过以下方式进行-

<body>
<form id="form1" runat="server">
<div id="div1" style="height:100px; width:192px; background-color:red;">

</div>
<br />
<div id="div2" style="height:100px; width:192px; background-color:green; display:block">

</div>
<br />
    <asp:Button runat="server" Text="Change color" id="btnColor" OnClientClick="javascript:return changeColor();"/>
    <asp:Button Text="Hide 1st" runat="server" ID="btnHide1st" OnClientClick="javascript:return hideDiv('div1');"/>
    <asp:Button Text="Hide 2nd" runat="server" id="btnHide2nd" OnClientClick="javascript:return hideDiv('div2');"/>
</form>

希望这可能对您有所帮助。

【讨论】：