I would like to create a field where the user can write something. As soon as you press the “Speichern” button, the text should no longer be editable. It should only be editable again with the “Bearbeiten” button. I always want to save the current result in the LocalStorage. However, it always shows me the text of the “Speichern” button. As soon as I change the text and press reload, it is deleted and the first/old result is displayed again. Does anyone have an idea how I could solve this? I’ve tried so many different variations, but I can’t get the result I want.

function fixTextarea() {
  let textArea_ = document.getElementById("textarea");
  let speichernFix = document.getElementById("speichern");
  let bearbeitenFix = document.getElementById("bearbeiten");

  // Event listener for saving
  speichernFix.addEventListener("click", function() {
    textArea_.setAttribute("readonly", true);
    textArea_.style.outline = "1px solid green";
    textArea_.style.border = "none";
    localStorage.setItem("textareaContent", textArea_.value); // Inhalt speichern
  });

  // Event listener for editing
  bearbeitenFix.addEventListener("click", function() {
    textArea_.removeAttribute("readonly");
    textArea_.style.outline = "1px solid green";
  });

  // Retrieve and play content from localStorage
  if (localStorage.getItem("textareaContent")) {
    textArea_.value = localStorage.getItem("textareaContent");
  }
}


document.addEventListener("DOMContentLoaded", fixTextarea);

<div class="roth_allgemein">
  <h2>Notizen</h2>
  <div class="Notizen">
    <textarea id="textarea"></textarea>
  </div>
  <button class="Absenden" id="speichern" onclick="fixTextarea()"><b>Speichern</b></button>
  <button class="Absenden" id="bearbeiten" onclick="fixTextarea()"><b>Bearbeiten</b></button>
</div>
<script src="test.js"></script>