Why won't the text on my toggle button update in my HTML code?

Question

Why won't the text on my toggle button update in my HTML code?

When I use the same id for multiple toggle buttons, the text value is not changing. However, when I use a single button, the text value changes as expected.

The toggle buttons can switch between displaying "am" or "pm."

Below is the 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 the HTML line used for the toggle button:

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

Check out my screenshots https://i.sstatic.net/jVacY.png.

An important note: The id value "myToggle" must be unique.

javascript html css twitter-bootstrap toggle

Answer 1

Answer №1

$(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 goes against the W3C specification to have multiple elements with the same id in HTML.

jQuery, in this scenario, utilizes the document.getElementById method which only retrieves the first element with that id.

If you require multiple elements, use classes instead.

Answer 2

$(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 goes against the W3C specification to have multiple elements with the same id in HTML.

jQuery, in this scenario, utilizes the document.getElementById method which only retrieves the first element with that id.

If you require multiple elements, use classes instead.

Answer 3

Answer №2

It is important for ids to be unique within the DOM. To achieve this, classes can be used instead. Simply add a new class to all buttons with similar functionality, such as btn-toggle-time.

Approach 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');
    }
  });
});

Approach 2

Another option is to style a text field to look like a button. This way, when you submit the form, there's no need to maintain the value through javascript. Run the snippet to see how it works. Instead of changing text, the value of the text field will be modified in this scenario.

$(".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/>

Answer 4

It is important for ids to be unique within the DOM. To achieve this, classes can be used instead. Simply add a new class to all buttons with similar functionality, such as btn-toggle-time.

Approach 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');
    }
  });
});

Approach 2

Another option is to style a text field to look like a button. This way, when you submit the form, there's no need to maintain the value through javascript. Run the snippet to see how it works. Instead of changing text, the value of the text field will be modified in this scenario.

$(".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/>

Why won't the text on my toggle button update in my HTML code?

Answer №1

Answer №2

Approach 1

Approach 2

Similar questions

Implement Offcanvas feature with Bootstrap 3 Navbar set to Fixed Top position

Looking to iterate through MongoDB using a promise and a forEach loop? I'm aiming to populate an array

how can I trigger an AJAX request after a specific JavaScript function in JSF 2.0

What is the best way to retrieve text from a span within an input field when it is highlighted?

What is the correct way to configure dependencies in RequireJS in order to pass variables between files successfully?

Centering a division inside another division

How come my XPath is overlooking a condition and choosing several nodes instead?

Using Javascript to create alerts that display all objects

The variable in Angular stopped working after the addition of a dependent component

Optimal method for handling multiple jQuery selectors is to use proper syntax

New Issue in Firefox 15: When using divs, content spills over into border images

Can tabs be created without the use of javascript?

Delay in the execution of JavaScript code

What is the best way to create a list and incorporate a sorting function using Vue JS?

What is the best way to retrieve data from a numerical title in ReactJS?

Some browsers may not display the table border properly due to issues with border-collapse

Middleware in Express.js Router

AngularJS and adding to an array in the routing process

Enhance the look of the Tinymce editor in Joomla with personalized formatting options

Combining the power of Google Blockly with AngularJS