CODEWITHSUNDEEP
javascriptjqueryhtmlshow-hidejquery-events
Unknown_Coder
Unknown_Coder

Reputation: 774

Change text "Show"/ "Hide" on Button Click not Working

My desire output is to hide paragraph when user click on a button and the same button will use for hiding paragraph and change a name of the button as well.

As you can see the output in a snippet, When I click on Button then the text of the button is not changed and the paragraph is also not showing.

    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").hide("slow", function(){
                if($("#myShowHidebtn").prop('value', 'Show'))
                              $('#myShowHidebtn').html('Hide');
                alert("The paragraph is now hidden");
            });
            $("#myShowHidebtn").on("click", function(){
                 if($("#myShowHidebtn").prop('value', 'Hide'))
                              $('#myShowHidebtn').html('Show');
                alert("The paragraph is now hidden");
            });
        });
    });
    </script>
    </head>
    <body>
    <button id="myShowHidebtn">Hide</button>
    <p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>
    </body>
    </html>

Upvotes: 1

Views: 2628

Answers (9)

Keeper
Keeper

Reputation: 21

Rory right, "Html" tag is root of the problem as JS is case sensitive

I've changed code a little bit to looks smarter.

var hidden = false;
$("#myShowHidebtn").click(function() {
    if (hidden == false)
  {
    $("p").hide("slow", function() { 
      $("#myShowHidebtn").html("Show");
      alert("The paragraph is now hidden");
      hidden = true;
    });
  }
  else
  {
    $("p").show("slow",  function() {
        $("#myShowHidebtn").html("Hide");
        alert("The paragraph is now shown");
        hidden = false;});
  }
});

Working fine, check here

Regards,

Upvotes: 1

cнŝdk
cнŝdk

Reputation: 32175

There are several problems that should be corrected in your code:

  • In your actual code you are making a big mistake by attaching the click event handler to your button twice, it will cause an infinite loop because you are reattaching the click handler in the button click itself.

  • You are using the value of the button incorrectly in your if condition, the following $("#myShowHidebtn").prop('value', 'Show') is not correct, this should be $("#myShowHidebtn").prop('value') === 'Show'.

  • And another problem is that you are not changing the button value so you can test upon it, you are changing the button html so you just need to test over .html().

Solution:

I tried to refactor your code and correct all the mistakes, this is what you need:

$("#myShowHidebtn").on("click", function() {
  if ($("#myShowHidebtn").html() === 'Hide') {
    $('#myShowHidebtn').html('Show');
    $("p").hide("slow");
  } else {
    $('#myShowHidebtn').html('Hide');
    $("p").show("slow");
  }
});

Demo:

$("#myShowHidebtn").on("click", function() {
  if ($("#myShowHidebtn").html() === 'Hide') {
    $('#myShowHidebtn').html('Show');
    $("p").hide("slow");
  } else {
    $('#myShowHidebtn').html('Hide');
    $("p").show("slow");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

Upvotes: 2

Pete
Pete

Reputation: 58462

You are setting the property value not doing an if and you are also binding an extra click event on every click. Try the following (comments in jQuery below)

$("#myShowHidebtn").click(function() {  // bind the click to the button
  var button = $(this);

  if (button.html() == 'Hide') {   // check the html (the button has no value and prop('','') is a setter not a getter
    $("p").hide("slow", function() {  // do your hide
      button.html('Show');
    });
  } else {
    $("p").show("slow", function() {  // do your show
      button.html('Hide');
    });
  }

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

Upvotes: 2

Nagy Nick
Nagy Nick

Reputation: 755

Your code is a bit to complex and not correct logically.

  • The correct function name is html() not Html()
  • You are adding an event handler on to the button in the callback function of the other click event. This will add a new event-listener every time the button is clicked. This should be removed.
  • Instead of having to handlers, add your logic in to just one, making sure every time the button is clicked you toggle the text of the button and paragraph to.

This should work quite well:

$("button").click(function(){
  $("p").toggle("slow", function(){
    if ($("p").is(':visible')) {
      $('#myShowHidebtn').html('Hide');
    } else {
      $('#myShowHidebtn').html('Show');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

Upvotes: 2

Richard Parnaby-King
Richard Parnaby-King

Reputation: 14891

In this little code snippet I define the default behaviour of the button - hide. We then do a simple check on the p tag - is it hidden or not? If so, change the function to show. We then perform the function on the p tag and, based on the name of the function, show the appropriate value in the button.

$(document).ready(function() {
  $("button").click(function() {
    var func = 'hide',
      $this = $(this),
      $p = $this.next();
    if ($p.is(':hidden')) {
      func = 'show';
    }
    $p[func]('slow', function() {
      $this.html(func == 'hide'?'Show':'Hide');
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

Upvotes: 1

Demonyowh
Demonyowh

Reputation: 1672

$(document).ready(function(){

    $("#myShowHidebtn").click(function(){
        $("p").toggle(function(){
           if($("#myShowHidebtn").text() == "Hide"){ 
               $("#myShowHidebtn").text("Show"); }
           else{ $("#myShowHidebtn").text("Hide"); }
        });
    });

});

Upvotes: 1

guradio
guradio

Reputation: 15565

$("#myShowHidebtn").on("click", function() {
  console.log($(this).text() == 'Hide')
  if ($(this).text() == 'Hide') {
    $('#myShowHidebtn').text('Show');
    $("p").hide("slow");
  } else if ($(this).text() == 'Show') {
    $('#myShowHidebtn').text('Hide');
    $("p").show("slow");
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

  1. Remove the event handler for button
  2. Add the event handler using ID
  3. Check text if equal hide and show

Upvotes: 2

Rory McCrossan
Rory McCrossan

Reputation: 337714

Firstly Html() is incorrect. The method name is html().

The issue with your logic is that you're adding a new click handler to the button element every time it's clicked. To fix the logic simply call toggle('slow') on the p, and then update the text() of the button based on it's current setting, directly in the click handler. You can also use stop() to prevent quick successive clicks from filling up the animation queue. Try this:

$(document).ready(function() {
  $("button").click(function() {
    $("p").stop(true).toggle("slow");
    $("#myShowHidebtn").text(function(i, t) {
      return t == 'Hide' ? 'Show' : 'Hide';
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="myShowHidebtn">Hide</button>
<p>Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..Paragraph Containt..</p>

Upvotes: 4

Radek Anuszewski
Radek Anuszewski

Reputation: 1910

You should use $('#myShowHidebtn').html('Show'); $('#myShowHidebtn').html('Hide'); not .Html - JavaScript function names are case sensitive.

Upvotes: 1

Related Questions