How to change border color of the html input when [duplicate]

Question

For the sake of learning, I am making a login-registration system in HTML, CSS, and PHP. There would be different HTML text boxes and stuff.

What I want to achieve is when I write something in one text box, then take out my cursor and click on another textbox, I want to change the border color of the first text box to green.

I know how to change the border color through CSS but I want to do this only when such an event happens. Any help would be greatly appreciated.

Answer 1

Attach blur event to the input.

document.querySelectorAll('input').forEach((input) => {
  input.addEventListener('blur', function() {
    this.classList.toggle('green', this.value.length > 0);
  });
});

.green {
    border: 2px solid green;
}

<input type="text">
<input type="text">
<button>Click Me</button>