Change button value after clicking on it

Question

I have a function which returns bootstrap row and every row contains input field, textarea and remove button.

So I have multiple bootstrap rows as I am calling function for various time. After clicking on remove button I am changing border color of input and textarea just to indicate that I am not taking it into consideration. I have made remove button to work as toggle button so that it will add and remove error class that I am assigning to input and textarea.

Now I want to change the value of 'Remove' button to 'Add'. So that when I click on 'Add' button it will remove the style of input and textarea and it means that I can take those values into consideration.

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>

@CertainPerformance issue is a id given to bootstrap row. I have updated the above code — Pavan, Jul 24 '18 at 23:34

score 1 · Answer 1 · answered Jul 24 '18 at 23:34

1

It's pretty straightforward. Just add a click event to the button. The click event will give you an event (e) and you can then call the standard .innerText property on the element to set it. No need for jQuery here...

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

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

answered Jul 24 '18 at 23:34

mwilson

12,295
7
55
95

1

I'd use jquery just make it easier for fellow developers to read. Also jquery adds an abstraction layer on the event object. – Jul 24 '18 at 23:36
I have multiple remove buttons. I can click on a particular 'Remove' button the only thing is that I want to change its text to 'Add' – Pavan Jul 24 '18 at 23:39
@IamDOM: I disagree. jQuery has very little place in today's front end world. Importing an entire library just so you can have a cute little query selector is not ideal. `document.querySelector` and `document.querySelectorAll` are two reasonable ways to select an element in the DOM. Importing a library so you can just do `$()` like function. – mwilson Jul 24 '18 at 23:54
...and to the point of "making it easier for fellow developers to read"... jQuery is the definition of "spaghetti code." – mwilson Jul 24 '18 at 23:57
Ok, I'll start writing my own APIs from now on. Thank you. – Jul 25 '18 at 00:07
https://www.w3.org/TR/2003/WD-DOM-Level-3-Events-20030331/ecma-script-binding.html – Jul 25 '18 at 00:07

score 0 · Accepted Answer · answered Jul 24 '18 at 23:43

0

You can add an event listener to the button and change its textContent according to the value of a global variable.

<button id="removeOrAdd">Remove</button>
<script>
var remove = true;
document.getElementById("removeOrAdd").addEventListener("click", function(e){
  if(remove){
      this.textContent = "Add";
      remove = false;
  } else {
    this.textContent = "Remove";
    remove = true;
  }
});
</script>

answered Jul 24 '18 at 23:43

Unmitigated

76,500
11
62
80

it worked..Thanks – Pavan Jul 25 '18 at 18:14
@Pavan No problem. – Unmitigated Jul 25 '18 at 18:16

Change button value after clicking on it

2 Answers2