Show and Hide-method won't work on buttons

Question

I've created two buttons which purpose is to either show och hide a paragraph. But it won't work, i'm pretty confused at the moment.

HTML-code:

<!DOCTYPE html>
   <html lang="sv-se">
    <head>
      <meta charset="UTF-8">
      <title>My Web Page</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     <script src="show.js"></script>
</head>
<html>
  <body>
  <p class="para">Click on button to show or hide text</p>

    <button id="hide">Hide</button>
    <button id="show">Show</button>
 </body>

And here is my Javascript-code:

$(document).ready(function()
  $("#hide").click(function(){
    $(".para").hide();
});
$("#show").click(function(){
    $(".para").show();
    });
 )};

``$(document).ready(function()`` should probably be ``$(document).ready(function(){`` (note the missing ``{``) — Mike Scotty, Dec 23 '16 at 13:18
It's always good to check console. There you will see error if there's any wrong syntax . — The_ehT, Dec 23 '16 at 13:26
I understand that, however my i didn't forgot the { in my code just when i copied the code here. This solution don't work for me... — , Dec 23 '16 at 13:32

score 0 · Answer 1 · answered Dec 23 '16 at 13:20

See your brackets, they are wrongly coded! You should use the below syntax:

$(function() { ... });

As of jQuery 3.0, only the above syntax is recommended instead of ready as the other syntaxes still work but are deprecated. This is because the selection has no bearing on the behavior of the .ready() method, which is inefficient and can lead to incorrect assumptions about the method's behavior.

$(function(){

  $("#hide").click(function(){
    $(".para").hide();
  });
  
  $("#show").click(function(){
    $(".para").show();
  });

  
}); // <------ This brace was wrongly coded in your code!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="para">Click on button to show or hide text</p>

    <button id="hide">Hide</button>
    <button id="show">Show</button>

Hope this helps!

score 0 · Answer 2 · edited May 23 '17 at 10:29

There is a missing brace in your script, try this..

$(document).on('click', '#hide', function(){
      $(".para").hide();
});
$(document).on('click', '#show', function(){
      $(".para").show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
   <html lang="sv-se">
    <head>
      <meta charset="UTF-8">
      <title>My Web Page</title>
</head>
<html>
  <body>
  <p class="para">Click on button to show or hide text</p>
    <button id="hide">Hide</button>
    <button id="show">Show</button>
 </body>

alse refer THIS for better understanding of Click vs on.click in jQuery.

Thanks, this solutions works. I just wonder what is the benefit of writing the code this way? Im new in Javascript/JQuery as you might understand. — , Dec 23 '16 at 13:24

score 0 · Accepted Answer · answered Dec 23 '16 at 14:19

0

You are missing {} in your code .Try the below code

$(document).ready(function(){
   $("#hide").click(function(){
   $(".para").hide();
  });

$("#show").click(function(){
$(".para").show();
   });

});

answered Dec 23 '16 at 14:19

geekbro

1,293
12
13

Show and Hide-method won't work on buttons

3 Answers3