javascript - 将asp:Button文本转换为JavaScript函数

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

我想使用getElementByID将Text元素转换为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" />

这是这两个类的CSS：

.buttonBackgroundOn
{
    background: url(/Images/BlobOnButtonImg.PNG) no-repeat !important;
    width: 400%;
    height: 100%;
}

buttonBackgroundOff
{
    background: url(/Images/PlainBorderButtonImg.PNG) no-repeat !important;
    width: 400%;
    height: 100%;
}

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

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

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

最佳答案

<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>