Change button text (html) after clicking with Jquery

Question

As a beginner I'm struggling with what seems so simple. I have a disabled textarea and an "Edit" button. Once I click on the button, the textarea becomes editable as I want, but I need the "Edit" to become "Save". Could anybody help please?

$("#editButton").click(function() {
  $("#editButton").html("save");
});

<div class="input-field">
  <textarea disabled id="textarea2" class="materialize-textarea" type="text" data-length="500">.            </textarea>
  <label for="textarea2"></label>
  <a href="#" class="btn-large" id="editButton">Edit</a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 1

I'm not sure why you are saying that the textarea becomes editable as you want, as I see nothing in the code you have provided that changes anything about the textarea. As for the text of the button, I would use .text over .html - I would use the latter only if I was adding HTML.

If you wish for the button to have a toggle effect, you would use:

$("#editButton").click(function() {
  const isDisabled = !$('#textarea2').prop('disabled');

  $('#textarea2').prop('disabled', isDisabled)
  $("#editButton").text(isDisabled ? 'Edit' : 'Save');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-field">
   <textarea disabled id="textarea2" class="materialize-textarea" type="text" data-length="500"></textarea>
   <label for="textarea2"></label>
   <a href="#" class="btn-large" id="editButton">Edit</a>
</div>

Answer 2

Please try this

$("#editButton").click(function() {
 if($("#editButton").html()=="Edit"){
  $("#editButton").html("save");
  $("#textarea2").prop("disabled",false);
  }
  else
  {
   $("#editButton").html("Edit");
   $("#textarea2").prop("disabled",true);
  }
});

<div class="input-field">
  <textarea disabled id="textarea2" class="materialize-textarea" type="text" data-length="500"></textarea>
  <label for="textarea2"></label>
  <a href="#" class="btn-large" id="editButton">Edit</a>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>