[SOLVED] Disable the submit button when the <textarea> is empty and ensure it gets enabled after text is entered

Disable the submit button when the <textarea> is empty and ensure it gets enabled after text is entered

I want to disable the submit button when the textarea is empty. Initially, I set the submit button to a disabled state and wrote the following code. However, after typing text inside the textarea, the button doesn't get enabled. Below is the code I've written. I've also tried using an if...else condition, but it didn't work.

function disableEnableSubmitButton () {
  let textarea1 = document.getElementById("tbd").value;
  textarea1.addEventListener("input",change);
}

function change () {
  document.getElementById("btn10").disabled = false;
}

<form id="breakdown">
    <textarea id="tbd" placeholder="Enter breakdown details"></textarea>
    <br>
    <input type="submit" id="btn10" value="submit" disabled>
</form>

Solution

I have used if...else...block also. It works fine.

const textarea1 = document.getElementById("tbd");
      textarea1.addEventListener("input",dis)


function dis() {
      if (textarea1.value.trim() === "") {
        document.getElementById("btn10").disabled = true;
      } else {
        document.getElementById("btn10").disabled = false;
      }
      }

 <form id="breakdown">
    <textarea id="tbd" placeholder="Enter breakdown details"></textarea>
    <br>
    <input type="submit" id="btn10" value="submit" disabled>
  </form>