Assigning value from javascript to action:status div tag

Question

I have this below javascript where i am getting values from input field - The below function is called onchange event in input field.

 <script language="javascript">
    function getCheckStatusValue()
    {
        var statusvalue = document.getElementById('{!$Component.mainID.statusID}').value;
        var tdvalue = document.getElementById('td1');
        if (statusvalue == 'Sold'){
            alert('Hi');
              tdvalue =  statusvalue; 
            alert(tdvalue);
            }else{
                tdvalue = 'Please Wait.....';
                }
    }
</script>

Below is the action status section which is called from command button -

 public string mymessage {get;  set;}

<apex:inputField value="{!test.Status__c}" />
<apex:param assignTo="{!mymessage}" value=""/>

        <apex:actionStatus id="sta" stopText="">
        <apex:facet name="start">
            <div>
                <div class="popupBackground" />
                <div class="PopupPanel">
                    <table border="0" width="100%" height="100%">
                        <tr>
                            <td align="center" id="td1">{!mymessage}</td>
                        </tr>
                        <tr>
                            <td align="center"><img src="{!$Resource.whole}"/></td>
                        </tr>
                    </table>
                </div>
            </div>
        </apex:facet>
    </apex:actionStatus>

How to assign the javascript tdvalue to the action status section and display the value when action status is called.

Answer 1

This isn't going to work, because Visualforce assumes it "owns" any of the DOM (Document Object Model) elements that it renders on the page. This means, for example, the apex:actionStatus element can't be easily manipulated from JavaScript, because everything inside of it is managed by Visualforce. You'd have to use some sort of variable and merge directly into the element:

<apex:actionStatus id="sta" stopText="">
    <apex:facet name="start">
        <div>
            <div class="popupBackground" />
            <div class="PopupPanel">
                <table border="0" width="100%" height="100%">
                    <tr>
                        <td align="center" id="td1">{!mymessage}</td>
                    </tr>
                    <tr>
                        <td align="center"><img src="{!$Resource.whole}"/></td>
                    </tr>
                </table>
            </div>
        </div>
    </apex:facet>
</apex:actionStatus>

Which also means you'll have to write more Apex Code on the server, and incur the extra round trips.