How to access custom JSF tags through javascript getElementById

I have the following code.

<h:form id="Form">
  <div class="pageBody">
    <h:outputLabel id="lbl" styleClass="formLabel" value="#{messages['lable.email']}:" />
    <s:button id="login" label="#{messages['login.button']}" actionBean="#{account}" actionMethod="login" />
  </div>
</h:form>

Here is the javascript

var obj = document.getElementById("Form:lbl");  //This works
var obj1 = do开发者_Go百科cument.getElementById("Form:login"); //This doesnt work

Keep in mind that <s:button> is a custom JSF Component.

Any help is appreciated

It should work fine with custom components. Is it a custom component or a composite component? The problem you're having and the presence of JSF 2.0 tag indicates that it's actually a componsite component. For the difference between custom tags, custom components and composite components, check When to use <ui:include>, tag files, composite components and/or custom components?

In this answer, I'll assume that it's indeed a composite component.

First of all, JavaScript works with HTML DOM tree, not with JSF component tree. JavaScript namely runs on webbrowser, not on webserver. JSF runs on webserver, produces a bunch of HTML and sends it to webbrowser. The document.getElementById() accepts only HTML DOM element ID's.

So, to find out which HTML DOM element ID the <s:button> has generated, you should open the JSF page in your webbrowser, do a rightclick and then View Source and locate the generated HTML element in the HTML source.

In case of your <s:button id="login"> composite component which in turn uses for example <h:commandButton id="button"> in the implementation, then it'll look like something like this:

<input type="submit" id="Form:login:button" />

A composite component by itself namely an NamingContainer component, which prepends the IDs like that. The <h:form> is also such a component. This enables you to use multiple composite components inside the same parent container.

You should use exactly that ID in your JavaScript function.

var button = document.getElementById("Form:login:button");