How to make a non-clickable button when there is no text in the field and active when text appears in the input field?

Question

JavaScript

Hello everyone) The question is probably simple to the point of horror, but I did not find a clear answer on the Internet. I have a form. It has an input for entering data and a button for saving. How to make the button inactive when there is no text in the field and when there is text it is active? Or direct where to read about it)
Link to the code https://codepen.io/Ponomareva1994/pen/NWGMxEx

Answer 1

const input = document.querySelector("input");
const button = document.querySelector("button");

button.disabled = true;

input.addEventListener("input", function() {
  button.disabled = !this.value.length;
})

Answer 2

Attach a handler to the 'input' event of the input, check the content in it and activate/deactivate the button.