<p>I would like to use JavaScript to manipulate hidden input fields in a JSF/Facelets page. When the page loads, I need to set a hidden field to the color depth of the client.</p>

<p>From my Facelet:</p>

<pre><code>&lt;body onload="setColorDepth(document.getElementById(?????);"&gt;

&lt;h:form&gt;
  &lt;h:inputHidden value="#{login.colorDepth}" id="colorDepth" /&gt;
&lt;/h:form&gt;
</code></pre>

<p>When JSF processes the page, it is of course changing the IDs of the elements. What's the best way to reference these elements from my JavaScript code?</p>

You'll want to set the ID of the form so you'll know what it is. Then you'll be able to construct the actual element ID.
```
```
<body onload="setColorDepth(document.getElementById('myForm:colorDepth');">

<h:form id="myForm">
  <h:inputHidden value="#{login.colorDepth}" id="colorDepth" />
</h:form>
```
```
If you don't want to set the form's ID field, you could find it at runtime, like so:
```
```
<body onload="setColorDepth(document.getElementById(document.forms[0].id + ':colorDepth');">
```
```