Remove a css class for textbox on focus event using javascript without using jquery

Question

Am trying to remove "error-border" class for input fields in my form. i need to done it with javascript without using jquery, in 'Onfocus event' of each input field. Please help me to solve this

I have tried following code

document.getElementsByClassName("error-class").focus({
document.getElementsByClassName("error-class").remove();
});

Please help me to solve this

See the linked question's answers and [basic event handling](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener). You might also look into [event delegation](https://stackoverflow.com/a/1688293/157247). — T.J. Crowder, Apr 01 '19 at 09:35
`document.querySelector('input[type="text"]').addEventListener('focus', function(event) { this.classList.remove("error-class"); });` — mtx, Apr 01 '19 at 09:44
I wasn't entirely happy with the delegation answers there, so [I added one](https://stackoverflow.com/a/55452921/157247). — T.J. Crowder, Apr 01 '19 at 10:27

Thanveer Shah · Accepted Answer · 2019-04-01T09:40:19.913

0

Do it like this.

var error = document.getElementsByClassName("error-class");

error.onfocus = function(){
  error.classList.remove('error-class');
}

edited Apr 01 '19 at 09:40

answered Apr 01 '19 at 09:34

Thanveer Shah

3,250
2
15
31

Its giving error, i want to remove error border of each of the form elements error class in on focus – MCOPI Apr 01 '19 at 09:42
It would be great if you could post your entire code including the CSS , So can see what is happening in the code – Thanveer Shah Apr 01 '19 at 09:43
So when you focus on the "error-class" , You want to remove the "error-border" class ? – Thanveer Shah Apr 01 '19 at 09:47
Yes, i want it do for each of the form fields in on focus event – MCOPI Apr 01 '19 at 09:51

Remove a css class for textbox on focus event using javascript without using jquery

1 Answers1