<input class="input" type="text" placeholder="fill me">
<button class="button" onclick="myFunction()">Click Me</button>

<p id="result"></p> 



body {
	padding: 1rem;

}
let input = document.querySelector(".input");
let button = document.querySelector(".button");

// button.disabled=true

button.setAttribute("disabled", true);

input.addEventListener("change", stateHandle);

function stateHandle() {
  if (document.querySelector(".input").value === "") {
    button.setAttribute("disabled", true);
  } else {
    button.disabled = false;
  }
}


function myFunction() {//from w ww. j a va 2  s  .  c o  m
    document.getElementById("result").innerHTML = "You clicked the button";
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.