Problems with use $ (document) .ready (function () {})

4

I'm starting with js and in practice this question arose:

The script that I will show below works correctly.

<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>

But when I enter this script within $(document).ready(function(){}) the code no longer works:

<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>

What did I do wrong?

    
asked by Rank16 25.07.2017 в 20:32
source

2 answers

1

If the function you want to execute, as I suppose, affects elements that are inside the DOM, effectively, you have to call it when the DOM is ready. Precisely, that is the utility of $( document ).ready(function() {... that by the way is deprecated from jQuery 3. It is recommended to use instead: $(function() { . It ensures that there is no wrong code when trying to use or modify DOM elements without being loaded yet. So in jQuery, everything that belongs to the DOM must be called within the scope of $(function() { ...}); On the contrary, if it is an element of the window, you must use window.onload (the link below explains the difference).

If the action you want to execute is linked to a button on a form, for example, a way to call it would be, once the document is ready, listen to the clicks of the button, using its id. This is just one, among other possibilities to call your function:

// $( 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>

Regarding the operation of document.ready, you can consult: What is the difference between window.onload and $ (document) .ready ()?

    
answered by 25.07.2017 / 21:37
source
4

The action function (num) is only visible within the anonymous function of .ready(fn) .

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

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

You have to expose the function to the global scope so that you can execute it but still you can not execute it immediately because ready is executed when the DOM has been fully loaded:

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

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

So you have 2 options:

  • You get the definition of .ready(fn) if you want to execute it immediately
  • For example:

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

    Note: the .ready (fn) would not be necessary, just leave it as an example.

  • You run the method within .ready(fn) :

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

  • answered by 25.07.2017 в 20:52