title: Getting JSF-defined component with Javascript
body: <p>I'm creating an interface using JSF, and I'd like the value of one text field to provide the default for a second if the second hasn't yet been set.  The crucial code will look something like this:</p>
  
  <pre><code>&lt;h:outputScript&gt;
  function suggestValue2() {
      var value2 = document.getElementById('value2').value;
      if (value2 == "") {
          document.getElementById('value2').value = document.getElementById('value1').value;
      }
  }
  &lt;/h:outputScript&gt;
  
  &lt;h:inputText
      id="value1"
      onblur="suggestValue2();" /&gt;
  
  &lt;h:inputText
      id="value2" /&gt;
  </code></pre>
  
  <p>The problem is this doesn't actually work.  The actual IDs of those two input elements get prefixed with some JSF-generated values, which tanks the <code>getElementById</code> calls.  What's the best way for me to accomplish what I'm trying to accomplish here?
  <hr>
  <b>Edit:</b>  I should note that this is going to appear inside a composite component, which could wind up appearing multiple times on a single page.  JSF dynamically setting the actual ID represents desired behavior.</p>