将asp:Button文本获取到JavaScript函数中

我试图完成基于文本更改asp:按钮（用户控件）背景图像的任务。它基本上是一个切换操作（开/关）背景图像

我想使用getElementByID将文本元素放入javaScript函数中的int变量中。但这似乎不起作用。以下是我的javascript+asp.net代码：

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ButtonControl.ascx.cs" Inherits="WebUI.ButtonControl" %>
<link href="Content/ButtonStyles.css" rel="stylesheet" />

<script src="http://code.jquery.com/ui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>

<script type="text/javascript">
    function toggleButtonImage()
    {

        **THE ERROR IS HERE**
        var btnValue = parseInt(document.getElementById('<%=Button.ClientID%>').value);

        //if Text value greater than one then display image
        if (btnValue > 1)
        {
            $(document).ready(function ()
            {
                $("#AcumenButton").click(function ()
                {
                    $("#AcumenButton").addClass("buttonBackgroundOn");
                    return false;
                });
            });
        }

        // else no image
        else
        {
            $(document).ready(function ()
            {
                $("#Button").click(function ()
                {
                    $("#Button").addClass("buttonBackgroundOff");
                    return false;
                });
            });
        }

    }
</script>

<asp:Button ID="Button" runat="server" Text="3" Width="7.2%" Height="79px" />

使用此用户控件的页面在其.cs类中具有以下内容：

ClientScript.RegisterStartupScript(this.GetType(), "js", "toggleButtonBorder();", false);

---

我真的不知道我错在哪里。有什么建议吗？

经过大量挖掘，我发现JavaScript可能不是这里使用的最佳工具。相反，我为用户控件ascx.cs类中的按钮设置了CssClass，以获得所需的结果，因此：

protected void Page_Load(object sender, EventArgs e)
    {
        ToggleButtonImage(int.Parse(ButtonText));            
    }
public int ToggleButtonImage(int btnTextValue) 
        {
            int btnTextVal = btnTextValue;

            if (btnTextVal > 1)
            {
                Button.CssClass = "buttonBackgroundOn";
            }
            else if (btnTextVal <= 1)
            {
                Button.CssClass = "buttonBackgroundOff";
            }
            return btnTextVal;
        }

受保护的无效页面加载（对象发送方，事件参数e）
{
切换ButtonImage（int.Parse（ButtonText））；
}
公共int切换按钮图像（int btnTextValue）
{
int btnTextVal=btnTextValue；
如果（btnTextVal>1）
{
Button.CssClass=“buttonBackgroundOn”；
}
否则如果（btnTextVal

$（文档）.ready（函数（）
{
**错误就在这里**
var btnValue=parseInt（document.getElementById（“”）.value）；
//如果文本值大于1，则显示图像
如果（BTN值>1）
{
$（“#AcumenButton”）。单击（函数（）
{
$（“#AcumenButton”）.addClass（“按钮背景”）；
返回false；
});
}
//否则就没有图像了
其他的
{
$（“#AcumenButton”）。单击（函数（）
{
$（“#AcumenButton”）.addClass（“buttonBackgroundOff”）；
返回false；
});
}
});
您遇到了什么错误？document.getElementById（''）.value返回了什么？您在类“buttonBackgroundOff”中缺少了点，它必须是“.buttonBackgroundOff”没有这样的错误。按钮被呈现为普通。由于某些奇怪的原因，clientID被返回为AcumenButton。我如何访问文本？@MCSI：谢谢你的好眼力。但没有解决问题，因为我根本没有输入else条件。@Remy-我改为，但没有成功。是的，除非你在上更改按钮文本使用JavaScript的客户端，只需在代码背后操纵css类，实现和维护起来就容易多了。
protected void Page_Load(object sender, EventArgs e)
    {
        ToggleButtonImage(int.Parse(ButtonText));            
    }
public int ToggleButtonImage(int btnTextValue) 
        {
            int btnTextVal = btnTextValue;

            if (btnTextVal > 1)
            {
                Button.CssClass = "buttonBackgroundOn";
            }
            else if (btnTextVal <= 1)
            {
                Button.CssClass = "buttonBackgroundOff";
            }
            return btnTextVal;
        }

<script type="text/javascript">
    $(document).ready(function ()
            {


        **THE ERROR IS HERE**
        var btnValue = parseInt(document.getElementById('<%=AcumenButton.ClientID%>').value);

        //if Text value greater than one then display image
        if (btnValue > 1)
        {
             $("#AcumenButton").click(function ()
                {
                    $("#AcumenButton").addClass("buttonBackgroundOn");
                    return false;
                });

        }

        // else no image
        else
        {

                $("#AcumenButton").click(function ()
                {
                    $("#AcumenButton").addClass("buttonBackgroundOff");
                    return false;
                });

        }

    });
</script>