Question

I’m trying to set the text on a button in a JScript function. I am using a JScript function like this…

    function myfunction(sender, eventArgs)
    {
        wanted_text = window.source_text_field.get_displayText();

        if (document.getElementById("my_span_element") != null)
        {
            document.getElementById("my_span_element").innerText = wanted_text;
        }

        if (document.getElementById("my_button") != null)
        {
            document.getElementById("my_button").text = wanted_text;
        }

    }

where the controls concerned are define like this…

    <span id="my_span_element" class="some_class"></span>

    <asp:Button id="my_button"
                runat="server"
                class="some_other_class"
                text=""
                Width="48"
                Height="25"
                onclick="do_foo"/>

The text in the span element is set correctly but the button is unaffected. I’ve also tried innerText, Value, Text, and also attempted to use the answer to this question but to no avail.

Can anyone see what I have overlooked?

Answer 1

There are 2 problems here:

First: you use wrong attribute – should be “value”, instead of “text”

Second: document.getElementById("my_button") will not work because ASP.NET assigns it’s own ids to controls. If you take a look at generated markup you will notice that id of the element is completely different.

If your javascript is inside of the same .aspx page as <asp:button /> control, you can do like this:

document.getElementById("<%= my_button.ClientID %>").value = "some text";