4

Estoy iniciando con js y en la práctica surgió esta duda:

El script que mostraré a continuación funciona correctamente.

<script src="js/jquery-2.0.2.min.js"></script>
<script>
        function accion(num){
            if (num==1) {
                $('#imagen1').hide().fadeIn(3000);
            }
            else if (num==2) {
                $('#imagen2').hide().fadeIn(3000);
            }
            else if (num==3) {
                $('#imagen3').hide().fadeIn(3000);
            }
        }
    </script>

Pero cuando este script lo introduzco dentro de $(document).ready(function(){}) el código ya no funciona:

<script>
    $(document).ready(function(){
        function accion(num){
        if (num==1) {
            $('#imagen1').hide().fadeIn(3000);
        }
        else if (num==2) {
            $('#imagen2').hide().fadeIn(3000);
        }
        else if (num==3) {
            $('#imagen3').hide().fadeIn(3000);
        }
    }
});
</script>

¿Qué hice mal?

3
  • 3
    ¿Cómo mandas llamar accion()?
    – Yikarus
    Commented el 25 jul. 2017 a las 18:37
  • ¿te arroja algun error o no se ejecuta?, ya que, veo la funcion definida pero la estas llamando
    – Kevin
    Commented el 25 jul. 2017 a las 18:39
  • las llamo a través de 3 input button haciendo uso de Onclick(1), Onclick(2), Onclick(3). Cada Button hace q la imagen desaparezca y vuelva aparecer.
    – Rank16
    Commented el 27 jul. 2017 a las 17:43

2 respuestas 2

4

La function accion(num) solo es visible dentro de la funcion anonima del .ready(fn).

   $(document).ready(function(){
            function accion(num){
            //...
        }
    });

accion(num); // error, funcion no definida.

Tienes que exponer la funcion al ambito global para que puedas ejecutarla pero aun asi no podras ejecutarla de inmediato porque ready se ejecuta cuando el DOM se ha cargado completamente:

  $(document).ready(function(){
            window.accion = function(num){
           //...
        }
    });

accion(33)// no definida, ready(fn) o se ha ejecutado todavia.

Asi que tienes 2 opciones:

  1. La sacas la definicion del .ready(fn) si la quieres ejecutar inmmediatamente

Por ejemplo:

$(document).ready(function(){

});

 function accion(num){
    alert(num);
  }
action(33)

Nota: el .ready(fn) no seria necesario, solo lo deje como ejemplo.

  1. Ejecutas el metodo dentro del .ready(fn):

    $(document).ready(function(){ function accion(num){ alert(num); } action(33) });

1
  • Gracias por su respuesta, me ha servido. Un saludo.
    – Rank16
    Commented el 27 jul. 2017 a las 17:50
1

Si la función que quieres ejecutar, como supongo, afecta a elementos que se encuentran dentro del DOM, efectivamente, tienes que llamarla cuando el DOM esté listo. Precisamente, esa es la utilidad de $( document ).ready(function() {... que dicho sea de paso está deprecated desde jQuery 3. Se recomienda usar en su lugar: $(function() {. Asegura que no haya código erróneo al intentar usar o modificar elementos del DOM sin estar aún cargados. De modo que en jQuery, todo lo que pertenezca al DOM debe ser llamado dentro del ámbito de $(function() { ...}); Por el contrario, si es un elemento de la ventana (window), debes usar window.onload (el enlace de más abajo explica la diferencia).

Si la acción que quieres ejecutar está ligada a un botón de un formulario por ejemplo, una forma de llamarla sería, una vez el documento listo, escuchar los clicks del botón, mediante su id. Esta es sólo una, entre otras posibilidades de llamar tu función:

// $( document ).ready(function() { (obsoleto,usar function)
$(function() {

  console.log("Ha ocurrido document.ready: documento listo");

  $("#btn").click(function() {
    num=$("#myText").val();
    alert("Botón presionado. Valor es: "+num);
  });


});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form id="myForm" action="">
  Escribe valor:
  <input type="text" id="myText" value="1">
  <input type="button" id="btn" value="Enviar">
</form>

Sobre el funcionamiento de document.ready, puedes consultar: ¿Cuál es la diferencia entre window.onload y $(document).ready()?

2
  • Gracias por su respuesta, me ha servido. Un saludo.
    – Rank16
    Commented el 27 jul. 2017 a las 17:50
  • Me alegro de que te haya servido @Rank16
    – A. Cedano
    Commented el 27 jul. 2017 a las 18:30

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.