Update the button text after it has been clicked

Question

Update the button text after it has been clicked

https://i.sstatic.net/QJALK.png

In my code, I have a function that generates bootstrap rows, each containing an input field, textarea, and a remove button.

As I call this function multiple times, I end up with several bootstrap rows. When clicking on the remove button, I change the border color of the input and textarea to indicate that they are not being considered. The remove button functions as a toggle button, adding and removing an error class assigned to the input and textarea.

Now, I want to change the text on the button from 'Remove' to 'Add'. Clicking on the 'Add' button should remove the style from the input and textarea, signaling that their values are now being considered.

function GetDynamicTextBox(value, tag) {
return'<div class="col-lg-4"><input class="form-control" type="text" value="'+tag+'" name="typetag" id="tags" data-role="tagsinput"/></div>'+'' +
    '<div class="col-lg-6"><textarea class="form-control issuetext" name="comment" id="" cols="" rows="">'+value+'</textarea></div>'+
    '<div class="col-lg-2">'+
       '<input type="button" value="Remove" class="remove btn btn-default" /></div>'
}

 $("body").on("click", ".remove", function () {
    $(this).closest('#issue').find('.bootstrap-tagsinput').toggleClass('error')
    $(this).closest('#issue').find('.issuetext').toggleClass('error')


});



<div class='row'id="issue">
   <div class="col-lg-4">
     <input class="form-control" type="text" value="'+tag+'" name="typetag" 
     id="tags" data-role="tagsinput"/></div>
  <div class="col-lg-6">
    <textarea class="form-control issuetext" name="comment" id="" cols="" 
    rows="">'+value+'</textarea></div>
  <div class="col-lg-2">
    <input type="button" value="Remove" class="remove btn btn-default" /></div>
</div>

javascript jquery html css bootstrap-4

Answer 1

Answer №1

Simply put, all you need to do is attach a click event listener to the button. When the button is clicked, the event object (e) will be passed to the callback function where you can access the element and update its text using the .innerText property. jQuery is not necessary for this task...

const btn = document.getElementById('testButton');
let clickCount = 0;
btn.addEventListener('click', (e) => {
e.currentTarget.innerText += clickCount++;
});

<button type="text" id="testButton">Initial Value</button>

Answer 2

Simply put, all you need to do is attach a click event listener to the button. When the button is clicked, the event object (e) will be passed to the callback function where you can access the element and update its text using the .innerText property. jQuery is not necessary for this task...

const btn = document.getElementById('testButton');
let clickCount = 0;
btn.addEventListener('click', (e) => {
e.currentTarget.innerText += clickCount++;
});

<button type="text" id="testButton">Initial Value</button>

Answer 3

Answer №2

If you want to dynamically change the text of a button based on a global variable, you can achieve this by adding an event listener to the button.

<button id="toggleButton">Toggle</button>
<script>
var toggle = true;
document.getElementById("toggleButton").addEventListener("click", function(e){
  if(toggle){
      this.textContent = "Off";
      toggle = false;
  } else {
    this.textContent = "On";
    toggle = true;
  }
});
</script>

Answer 4

If you want to dynamically change the text of a button based on a global variable, you can achieve this by adding an event listener to the button.

<button id="toggleButton">Toggle</button>
<script>
var toggle = true;
document.getElementById("toggleButton").addEventListener("click", function(e){
  if(toggle){
      this.textContent = "Off";
      toggle = false;
  } else {
    this.textContent = "On";
    toggle = true;
  }
});
</script>

Update the button text after it has been clicked

Answer №1

Answer №2

Similar questions

I'm puzzled as to why my JavaScript code only functions correctly when I place it after the HTML, despite having a window.onload event handler in place

Error: The variable `$` has not been defined in your Vue.js webpack project

Guide on toggling the button by clicking on the icon to turn it on or off

Using InnerHTML in Javascript within the Quasar/VueJS framework is unsupported

Streaming data from a third-party API using WebSockets to distribute it to various subclients

My function handler is not being triggered when using React's onClientClick

Exploring the potential of Python loops within Selenium capabilities

Add information from a filled data chart

I'm not sure how I can retrieve the pollId from a ReactJS poll

Is it possible to implement a universal margin for the homepage design?

Jaws reading out a modal message for accessibility purposes

Ways to maintain hover functionality when the submenu is visible

Adjust the div container to wrap underneath the image if the webpage width decreases

Utilize jQuery to navigate through Bootstrap tabs

Utilizing reusable styled components with pseudo elements and advanced logic

Extract data from JSON using the parse function

Is there a way to customize the look of the close button on a Bootstrap 5 search box?

Shifting the data label on a pie chart in ApexCharts - what's the trick?

The Bootstrap tooltip fails to display the visual style of the tooltip, only showing the data

Exploring Source Map Explorer in Next.js: A Beginner's Guide