javascript - 获取asp :Button Text into a JavaScript function

Question

我正在尝试完成根据文本更改 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);

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

Answer 1

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