HideShow - Jquery

0

Good morning Dear

I tried the HideShow method with an example class but it does not work.

<html>

<head>
    <script type="text/javascript" src="../jquery.js"></script>
    <script type="text/javascript">
        var x;
        x=$(document);
        x.ready(inicio);

        function inicio(){
           //var x=$("#mostrar");
            $("#mostrar").click(muestrame);
            //var x=$("#ocultar");
            $("#mostrar")..click(ocultame);
        }

        function muestrame(){
            //var x=$("objetivo");
            $("objetivo").show(fast);
        }

        function ocultame(){
           //var x=$("objetivo");
            $("objetivo").hide(fast);
        }

    </script>
    <style type="text/css">
        #objetivo{
            width: 200px;
            height: 200px;
            background-color: yellow;
            border: 1px solid black;
        }

    </style>
</head>

<body>
    <input type="button" id="mostrar" value="mostrar">
    <input type="button" id="ocultar" value="ocultar">
    <div id="objetivo"> Yo soy un div</div>
</body>

</html>
    
asked by Luis Miguel Sanchez Alzamora 14.12.2017 в 16:58
source

2 answers

1

If you are using jQuery, I recommend using it as much as possible, and you have several errors.

  • In your selector you were missing the item indicator to be able to select, remember to select by id use # and to select by class use .

  • The parameter that is passed to animation methods .hide() and .show() must be enclosed in quotes

  • $(document).ready(function(){
      $("#mostrar").click(function(){
        $("#objetivo").show('fast');
      });
    
      $("#ocultar").click(function(){
        $("#objetivo").hide('fast');
      });
    });
    #objetivo{
        width: 200px;
        height: 200px;
        background-color: yellow;
        border: 1px solid black;
        display: none;
    }
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    
    <input type="button" id="mostrar" value="mostrar">
    <input type="button" id="ocultar" value="ocultar">
    <div id="objetivo"> Yo soy un div</div>
        
    answered by 14.12.2017 в 17:05
    0

    Because you are passing a variable undefined in .show() or .hide() and you should declare it or pass it as string or number since jQuery accepts the string "fast" to show or hide an element .

    For example:

    $("objetivo").show("fast");
    
    // lo muestra en 200 milisegundos
    $("objetivo").show(200);
    

    I saw that you also asked how to validate the code, you can use an IDE to work with javascript like Atom or Visual Studio Code that validate code.

        
    answered by 14.12.2017 в 17:58