Switch button text back and forth with Bootstrap and jquery

Question

I have a button I'm using with bootstrap.

I'd like to flip the text back and forth with each click. So for example the button' default text would be "Off", you click it, it now shows "On". Click it again and it's "Off" again and so on. Below is my bootrap and jquery code. How would I change this to meet my needs?

<button type="button"  id="cmdLargeButton" data-complete-text="On" class="btn btn-primary btn-lg" autocomplete="off">Off</button>
 <script>
      $('#cmdLargeButton').on('click', function () {
          $(this).button('complete')
      })
</script>

Also, I can't figure out whey I'm getting this error using the "autocomplete" parameter which the example I saw said I had to use. Not sure what it does. Can someone explain why I'm getting this error?

Interested to know why my question had a negative vote? I figured any question is a good question. And I apologize. I thought I did accept the answer as what I was looking for. My checkmark didn't take. — John Waclawski
– John Waclawski, Commented Jan 20, 2018 at 15:41

Death-is-the-real-truth · Accepted Answer · 2018-01-18 16:55:18Z

2

You can use the ternary operator with condition check and the two texts that you want to swap on each click

Working snippet:

$(function(){
   $('#cmdLargeButton').on('click', function () {
      $(this).text($(this).text() == "Off" ? "On" : "Off");
   });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button"  id="cmdLargeButton" data-complete-text="On" class="btn btn-primary btn-lg" autocomplete="off">Off</button>

edited Jan 18, 2018 at 16:55

answered Jan 18, 2018 at 16:50

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Switch button text back and forth with Bootstrap and jquery

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related