javascript - Why my JS function is not defined when the file that has it is already being called at the footer of the page? -

i have couple of input form items want shown when user clicks button. here's jsfiddle

so, i've created html button , referenced 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 file formularios.js , added bottom of 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 created js file (formularios.js) take away classes maintain 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 parts of form should affected clicking 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 when click button, console throws error:

uncaught referenceerror: mostrarfiltros not defined

what doing wrong? thanks!

firstly, there few things wrong yout jsfiddle (check settings on javascript section of jsfiddle):

• your javascript defined "onload" not visible on global scope.
• you using jquery selectors, haven't added jquery in frameworks , extensions.

secondly, user mentioned, if function defined, actions wish have not executed because of if statement.

also, suggest either

• stick 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 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, answer original problem, file containing javascript not being loaded. can verify devtools/firebug. helpful if posted folder structure well.