Changing style using JS & HTML works, JS & CSS doesn't always

Question

Using JS & HTML markup Always works: Codepen

if (document.forms['myForm'].name.value == '') {
    name.style.background = "pink";
}
else {
    name.style.background = "white";
}

Using JS & CSS Doesn't always work: Codepen

if (document.forms['myForm'].name.value == '') {
    // give this element the .error class from the css file
    name.className = name.className + " error";
}
else {
    // this removes the error class
    name.className = name.className.replace(" error", ""); 
}

Why is JS & CSS inconsistent? I would like to use this approach since I can just apply an error class to each of the elements I want to effect.

If you want something that will update as the client uses it you can expand on this codepen.io/NewToJs/pen/MYqgOm?editors=001 this will add an event listener to anything with the class of required and listen for the input event. The function required() will need much more work but I thought I would show you this anyway. You can expand on this to display errors for each input before the user submits — NewToJS
– NewToJS, Commented Mar 5, 2015 at 22:20

George · Accepted Answer · 2015-03-05 22:07:20Z

3

Everytime you hit your submit button and a field isn't filled out, error is added to the classList property; if you submit more than once, multiple classes will be added. Whereas when removing the class, .replace(' error', '') will only replace the first instance of error it comes across.

You can use regex to find all instances of error:

name.className = name.className.replace(/ error/g, "");

Codepen

Sidenote: You can take advantage of classList but its browser support is limited.

edited Mar 5, 2015 at 22:07

answered Mar 5, 2015 at 21:57

George

36.9k9 gold badges70 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

tazboy Over a year ago

I didn't even think that I kept adding the .error class. Beautifully done.

Collectives™ on Stack Overflow

Changing style using JS & HTML works, JS & CSS doesn't always

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related