Мой отключенный атрибут не работает на javascript

#javascript #css #disabled-input

Вопрос:

После 50 длины кнопка должна быть отключена. И не работает, работает, меняя цвет фона , но когда я делаю btn.disabled = true, ничего не происходит.

 <div id="main">
    <p>Share this on Twitter</p>
    <form action="">
      <textarea></textarea>
      <div class="buttons">
        <span class="limit">100</span>
        <button class="btn">Tweet</button>
      </div>
    </form>
  </div>
 

JS:

 const input = document.querySelector("textarea");
const btn = document.querySelector(".btn");
const limit = document.querySelector(".limit");
let max = 50;

const updateLimit = () => {
  limit.textContent = max;
  input.addEventListener("input", () => {
    let inputLength = input.value.length;
    limit.textContent = max - inputLength;
    if (inputLength > max) {
      btn.disabled = true;
      limit.style.color = "red";
    } else {
      btn.disabled = false;
      limit.style.color = "black";
    }
  });
};

updateLimit();
 

Комментарии:

1. Кнопка уже отключена должным образом. Видишь https://playcode.io/827305