Getting a4j:commandButton with getElementById fails

[brachie]

Hi,

I think the subject says everything. Here is my code:

<h:form id="projectForm">
 <a:commandButton id="proUpdateButton" reRender="panel1" styleClass="button" action="#{projektManager.updateProjekt()}" value="Save changes"/>

 <h:inputText onchange="javascript:document.getElementById('projectForm:proUpdateButton').style.backgroundColor=red;" required="true" value="#{projekt.projektnummer}" maxlength="10" size="30"/>

....
</h:form>

So what I want is to turn the Save button red, when the input field has changed.
This does not work, because javascript cannot get the element by id (js error: document.getElementById("projectForm:proUpdateButton") has no properties).

In the generated html page the id's look like:

<form id="j_id102:projectForm" ...>
 <input id="j_id102:projectForm:proUpdateButton" ...>
...

I do not want to hardcode the generated ids... whant can I do to make getElementById work with my jsf component id's?

Regards,

Alexander