CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Filip
Filip

Reputation: 147

Change Button Value Onclick

I want to make a page with riddles and after every riddle an answer button and onclick shows the answer but also changes the value of the button into hide so when you press again the button you hide the answer. I made something but I'm a beginner in Javascript so I can't figure out what I did wrong:HERE

html:

<input type="button" value="Answer" onclick="return change(this);" />
<p id="click">This is the riddle answer.</p>

css:

#click{
display:none;}

js:

   $(document).ready(function(){
    $(window).change(function(){
        if (el.value == "Answer" ){
            $("p#click").removeClass("click");
            el.value = "Hide";
        } else if ( el.value = "Hide";) {
            $("p#click").addClass("click");
        }
    });
});

I want to be something like this: Demo but 1 single button which can change its value and change from answer to hide and from hide to answer.

Upvotes: 0

Views: 1477

Answers (2)

user3177812
user3177812

Reputation: 1

This is the working code for you :

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#show").click(function(){
      $("#click").slideToggle();
      if($("#show").val() == 'Show')    {
        $("#show").val('Hide');
      }else {
        $("#show").val('Show');
      }
  });
});
</script>
<style>
#click{
display:none;}
</style>
</head>
<body>
<input type="button" value="Show" id="show" />
<p id="click">This is the riddle answer.</p>
</body>
</html>

Upvotes: 0

Surjith S M
Surjith S M

Reputation: 6740

Here is the updated Demo

jQuery

$(document).ready(function(){
  $("#show").click(function(){
      if ($(this).text() == "Show")
       $(this).text("Hide")
    else
       $(this).text("Show");
      $("span").slideToggle();

  });
});

Upvotes: 2

Related Questions