Toggle button text is not changing in html?

Question

Toggle text value is changing for single button, when I am using the same id for multiple toggle button its not changing.

Here toggle buttone am or pm.

here my javascript code i used

$(document).ready(function(){
  $('#myToggle').on('click', function () {
    var text=$('#myToggle').text();
    if(text === "am"){
      $(this).html('pm');
    } else{
      $(this).text('am');
    }
  });
});

here is my html line used for toggle button:

<button type="button" data-toggle="collapse" href= "#" id="myToggle" class="btn btn-secondary">am</button>

here is my screenshots:

And it says id value myToggle must be unique.

when my same id for multiple toggle ? what do you mean by this?Id should be unique. Instead use class — sridhar..
– sridhar.., Commented Apr 25, 2018 at 12:08
yes you need to use classes instead of 1 id if you are using it for multiple areas — Keith
– Keith, Commented Apr 25, 2018 at 12:10
@sridhar.. sorry i have edited my question can you check it out — PvDev
– PvDev, Commented Apr 25, 2018 at 12:10
so in your button, add a class, like class="toggleButton" and then take out the $('#myToggle')... and use $('.toggleButton')... — Keith
– Keith, Commented Apr 25, 2018 at 12:12

Kushtrim · Accepted Answer · 2018-04-25 12:11:07Z

3

$(document).ready(function(){
     $('.btn').on('click', function () {
      var text = $(this).text();
      if(text === "am"){
        $(this).html('pm');
      } else{
        $(this).text('am');
     }
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" data-toggle="collapse" href= "#"class="button btn btn-secondary">am</button>

<button type="button" data-toggle="collapse" href= "#" class="button btn btn-secondary">am</button>

It is not valid html according to the W3C specification to have more than one element with the same id.

jQuery in this case uses document.getElementById method and that returns only the first element with that id.

If you need more than one element use classes

answered Apr 25, 2018 at 12:11

Kushtrim

1,94910 silver badges15 bronze badges

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

Comments

Kumar · Accepted Answer · 2018-04-25 16:12:19Z

1

Ids should be unique in the DOM. Therefore here it can be done using classes. Add a new class to all the buttons with similar action for eg. btn-toggle-time

Method 1

HTML:

<button type="button" data-toggle="collapse" href= "#" 
   class="btn btn-secondary btn-toggle-time">am</button>

Javascript:

$(document).ready(function(){
  $('.btn-toggle-time').on('click', function (e) {
    e.preventDefault();
    var text = $(this).text();
    if(text === "am"){
      $(this).html('pm');
    } else{
      $(this).text('am');
    }

  });
});

Method 2

Alternatively, you can make a text field look like a button, so when you submit the form you won't have to maintain the value via javascript. Run the snippet to see. In this case, instead of changing the text you'd be changing the value of the text field.

$(".input-meridiem").on('click', function(e){
  e.preventDefault();
  var meridiem = $(this).val()
  if(meridiem === 'AM'){
    $(this).val('PM');
  } else {
    $(this).val('AM');
  }
});

input.input-meridiem{
  border: none;
  padding: 10px 20px;
  color: white;
  background: #363239;
  cursor: pointer;
  width: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input value="AM" class="input-meridiem" name="meridiem" readonly/>

edited Apr 25, 2018 at 16:12

answered Apr 25, 2018 at 12:15

Kumar

3,1262 gold badges19 silver badges24 bronze badges

1 Comment

Douwe de Haan Over a year ago

While your code works, I don't think this is the best answer, just for the fact that you don't explain at all what OP's problem is or what you did to fix it.

Collectives™ on Stack Overflow

Toggle button text is not changing in html?

2 Answers 2

Comments

Method 1

Method 2

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Method 1

Method 2

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related