Change button color when input field is filed

In this article, you will learn how to change button color when input fields are filed.

We have the following button and an input field.

<button class="btn">Click Me</button>
<input onkeyup="changeColor()" class="input" type="text">

Whenever, the above input field is filled we will change the button's text color to green. The example is given below.

<button class="btn">Click Me</button>
<input onkeyup="changeColor()" class="input" type="text">
<script>
  function changeColor() {
      if(document.querySelector(".input").value != "") {
         document.querySelector(".btn").style.color = 'green';
      } else {
  document.querySelector(".btn").style.color = 'red';
      }
   }
</script>

Try it Yourself »

If the above input field is not empty, the button's text color will be green otherwise its color will be red.