单击后更改按钮值

Question

我有一个返回引导程序行的函数，每一行都包含输入字段，textarea和删除按钮。

所以我在不同时间调用函数时有多个引导程序行。单击删除按钮后，我更改输入和文本区域的边框颜色只是为了表明我没有考虑到它。我已将remove按钮制作为切换按钮，以便它将添加和删除我分配给输入和textarea的错误类。

现在，我想将“删除”按钮的值更改为“添加”。这样，当我单击“添加”按钮时，它将删除输入和文本区域的样式，这意味着我可以考虑这些值。

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>

Answer 1

这很简单。只需将click事件添加到按钮即可。 click事件将为您提供event（e），然后您可以调用元素上的标准.innerText属性进行设置。这里不需要jQuery ...

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

您可以向按钮添加事件侦听器，并根据全局变量的值更改其textContent。

<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>