I have a couple of input form items that I want to be shown when the user clicks a button. Here's the JSFiddle

So, I've created an html button and referenced my JS method when it's clicked:

<button type="button" id="mostrarOpcionesFiltrado" onclick="return mostrarFiltros.esconderFiltros();" class="btn btn-default btn-xs">Mostrar Opciones de Filtrado</button>

I've created a file formularios.js and added it to the bottom of my page:

<script src="js/formularios.js"></script>
<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

And finally created my JS file (formularios.js) where I take away the classes that maintain the items hidden:

var mostrarFiltros = {

    esconderFiltros: function() {
        if(document.getElementById('mostrarOpcionesFiltrado').clicked) {
            console.log('mostrando las opciones de filtrado');
            $('#apellido').removeClass('sr-only');
            $('#email').removeClass('sr-only');
            $('#dni').removeClass('sr-only');
            $('#username').removeClass('sr-only');
        }
    },

} //cierre del objeto mostrarFiltros

And these are the parts of the form that should be affected by clicking the button:

<div id="apellido" class="form-group sr-only">
        <label for="exampleInputName2">Apellido</label>
        <input type="text" class="form-control" name="apellido">
      </div>
      <div id="email" class="form-group sr-only">
        <label for="exampleInputName2">Email</label>
        <input type="text" class="form-control" name="email">
      </div>
      <div id="dni" class="form-group sr-only">
        <label for="exampleInputName2">DNI</label>
        <input type="text" class="form-control" name="dni">
      </div>
      <div id="username" class="form-group sr-only">
        <label for="exampleInputName2">UserName</label>
        <input type="text" class="form-control" name="username">
      </div>

My problem is that when I click the button, the console throws an error:

Uncaught ReferenceError: mostrarFiltros is not defined

What Am I doing wrong? Thanks!

Firstly, there are a few things wrong with yout jsFiddle (check the settings on your javascript section of jsFiddle):

• your Javascript is defined "onLoad" so its not visible on the global scope.
• You are using jQuery selectors, but haven't added jQuery in your frameworks and extensions.

Secondly, as another user mentioned, even if the function was defined, the actions you wish to have will not be executed because of your if statement.

Also, I would suggest you either

• Stick to pure js https://jsfiddle.net/nd0vmtvz/ :

  var mostrarFiltros = {
  
        esconderFiltros: function() {
          document.getElementById('apellido').classList.remove('sr-only');
          document.getElementById('email').classList.remove('sr-only');
          document.getElementById('dni').classList.remove('sr-only');
          document.getElementById('username').classList.remove('sr-only');
  
        },
  
    }
  
  

or

• Go with jQuery https://jsfiddle.net/q2xd65xc/ :

  var mostrarFiltros = {
  
      esconderFiltros: function() {
  
           $('#apellido').removeClass('sr-only');
           $('#email').removeClass('sr-only');
           $('#dni').removeClass('sr-only');
           $('#username').removeClass('sr-only');
       },
  
    } //cierre del objeto mostrarFiltros
  
  $(function() {
       $('#mostrarOpcionesFiltrado').click(function() {
           mostrarFiltros.esconderFiltros();
       });
  })
  
  

Finally, to answer your original problem, the file containing your javascript is most likely not being loaded. You can verify this with devtools/firebug. It would be helpful if you posted your folder structure as well.

more