javascript - How do I change my button text onclick?

I have a jQuery slideToggle that I am using to display and hide certain content. It always show an arrow pointing down, but if clicked and the text is shown, the arrow should be pointing up. Anyway to do this?

<!DOCTYPE html>
<html>
<head>
<script src=".12.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").slideToggle();
        });
    });
</script>

<button>&#8595;</button>
<p>Wow!</p>

</body>
</html>

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("button").click(function(){
            $("p").slideToggle();
        });
    });
</script>

<button>&#8595;</button>
<p>Wow!</p>

</body>
</html>

Share Improve this question asked Mar 31, 2016 at 6:55 lucafj2j282j 8913 gold badges13 silver badges32 bronze badges

How about $(SELECTOR).text() ? – Rayon Commented Mar 31, 2016 at 6:55
Get yourself "font-awesome" or "gyphicons" (or just two image files, but I'd recommend the first option). Create two classes ".arrow-up" and ".arrow-down". Then switch between the classes on button click. – print x div 0 Commented Mar 31, 2016 at 6:58
4 6 upvotes? hmmmm.... – asprin Commented Mar 31, 2016 at 11:16
@asprin I think this question was asked 1000 times already on SO. It looks like someone is collecting internet points – kukis Commented Mar 31, 2016 at 14:52

Add a comment |

8 Answers 8

Sorted by: Reset to default 6

As simple as that!

var toggled = false;
$("button").click(function() {
  if (!toggled) {
    $(this).html("&#8593;");
    toggled = true;
  } else {
    $(this).html("&#8595;");
    toggled = false;
  }

  $("p").slideToggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  &#8595;
</button>
<p>
  Wow!
</p>

Working Demo

$(document).ready(function() {
  $("button").click(function() {
    $("p").slideToggle();
    $(this).toggleClass('down up');

  });
});

.down {
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_down_48px-128.png");
  height: 130px;
  width: 130px;
}
.up {
  background-image: url("https://cdn3.iconfinder.com/data/icons/google-material-design-icons/48/ic_keyboard_arrow_up_48px-128.png");
  height: 130px;
  width: 130px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="down"></button>
<p>Wow!</p>

Try something like this.. :)

$(document).ready(function(){
    $("button").click(function(){
        $("p").slideToggle();
        $( this ).text('NewButtonText');
    });
});

This solutions checks if the button has an arrow pointing 'UP', if it does, replaces it with 'DOWN', and vice versa.

    $(document).ready(function(){
        $("button").click(function(){
            if ($(this).text() == 'up'){
                $(this).html('&#8595;')
            }else{
                $(this).html('up');
            }
            $("p").slideToggle();
        });
    });

https://jsfiddle.net/gogaa33d/

Try this it will work :

change the html content of button on slideToggle().

Html :

<button id="up">&#8593;</button>
<p>Wow!</p>

JQuery :

$(document).ready(function(){
    $("button").click(function(){
   var arrowId = $(this).attr('id');
   if (arrowId == 'up') {
     $("button").html('&#8595');
     $(this).attr('id','down');
     } else {
     $("button").html('&#8593');
     $(this).attr('id','up');
     }
        $("p").slideToggle();
    });
});

Demo : https://jsfiddle.net/64a6fafh/1/

Use $("button").text('Button Clicked'); to change the text of your button onclick

$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();
    $("button").text('Button Clicked');
  });
});

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

<button>&#8595;</button>
<p>Wow!</p>

</body>
</html>

My answer is based on Jorrex's answer. I'm a fan of making code short and readable. Simple logic should be simple code. IMO this next example is easier to read, especially if you have lots of code in your file.

Also, you can just as easily use plain Javascript for this, making it more lightweight.

var toggled = false;
$("button").click(function() {
    this.innerHTML = !toggled ? "&#8593;" : "&#8595;";

    toggled = !toggled; // flip the value
    $("p").slideToggle();
});

A suggestion based on @Jorrex's answer above.

You can also use e.g. button's class instead of a variable:

$("button").click(function() {
  if (!$(this).hasClass('toggled')) {
    $(this).html("&#8593;");
  } else {
    $(this).html("&#8595;");
  }
  $(this).toggleClass('toggled');
  $("p").slideToggle();
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>
  &#8595;
</button>
<p>
  Wow!
</p>

This way it would be much easier if one needs more than one such button on the same page.

Edit: Even if you don't plan to use more than one such button on a page, it's still safer not to use a variable here, because any other function inside $(document).ready(function(){ could possibly interfere with that variable -- and make you waste your time trying to figure out why "that strange things" (see this example) are happening. (While the error may seem obvious in that example, such errors become much harder to spot when your codebase grows.)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How do I change my button text onclick? - Stack Overflow

8 Answers 8

与本文相关的文章

评论列表(0)