Função javascript para ocultar ou disabilitar campo.

Saudações caros mestres programadores.

é o seguinte, já tentei de toda forma implementar essa funçao mas nao consigo, tenho os campos abaixo em meu form jsf.



Por padrao está em Pessoa fisica e o campo cnpj oculto, o que quero é que ao selecionar em Juridica, o campo cpf desapareça e apareça o campo cnpj, e quando escolho Fisica, o campo cnpj desapareça e reapareça o campo cpf.

Na pagina JSF estes componentes estão declarados assim, com a propriedade onchange chamando a funçao mudarPessoa().


<h:selectOneMenu id="fis_jur"  onchange="mudarPessoa" value="#{UsuariosFace.usuarioInEdit.fis_jur}">

                <f:selectItem itemValue="Fisica" itemLabel="Fisica" />
                <f:selectItem itemValue="Juridica" itemLabel="Juridica"/>

</h:selectOneMenu>

<easy:inputCpf  requiredMessage="CPF Invalido"  id="inputCpf" value="#{UsuariosFace.usuarioInEdit.cpf}" required="true" submitWithMask="true" useMask="true" useValidate="true" useMaskSize="true" placeHolder="_" styleClass="cpfvalido">
          
            <h:outputLabel  for="inputCpf" value="Cpf:" styleClass="labelcpf"
            style="font-weight: bold; font-family: verdana; font-size: 14px;
            position: absolute; left: 300px; top: 250px"/>

</easy:inputCpf>

<easy:inputCnpj requiredMessage="CNPJ Invalido"  id="inputCnpj" value="{UsuariosFace.usuarioInEdit.cnpj}"
required="true" submitWithMask="true" useMask="true" useValidate="true" useMaskSize="true" placeHolder="_" styleClass="cnpjvalido">

           <h:outputLabel  for="inputCnpj" value="Cnpj:" styleClass="labelcnpj"
           style="font-weight: bold; font-family: verdana; font-size: 14px;
           position: absolute; left: 300px; top: 280px"/>

</easy:inputCnpj>


A função que tento implementar é essa.

<script type="text/javascript">
   function mudarPessoa() {
      var valorMenu = document.getElementById("fis_jur"); // obtenho o valor do selectOneMenu
      if (valorMenu == "Fisica") {
          var elemento = document.getElementById("inputCpf");
          elemento.getElementById("inputCpf").style("display") = 'block';
          elemento.getElementById("inputCnpj").style("display") = 'none';
      } else {
          var elemento = document.getElementById("inputCnpj");
          elemento.getElementById("inputCpf").style("display") = 'none';
          elemento.getElementById("inputCnpj").style("display") = 'block';
      }
  }
</script>

outra coisa, onde eu coloco funções javascript, dentro ou fora do <h:form> ?

Caros mestres, com certeza tem algo errado, agradeceria se alguma boa alma me ajudasse.

agradeço pela atenção.

Rodrigo.