Simple JS to change field color when changed

Question

I have a form with several fields that are required, and many that are not required. I want the required fields to be pale pink until they are clicked on and then revert to the default color of all of the fields. I haven't really tried anything because I am not sure how to formulate it. I created a different class for the fields with rgba color value. One example I found does addClass, but the fields I need to change already have a class to define their width, outline, etc. Would addClass CHANGE an existing class, OR is there a "changeClass" functionality or something like that? I tried to modify the answer here: Change Class value With Javascript to work when I clicked the field but that did not work. I tried using document.querySelectorAll too because I have multiple fields separated by other non-required fields and I do not want them to all have the same id or be in the same divs.

I tried

function changeClass(){
  document.getElementByClass(".reqd").className = "ssmall4";
}

or

function changeClass(){
  document.querySelectorAll(".reqd").className = "ssmall4";
}

with

<input onClick="changeClass()" type="number" id="certYear" name="certYear"value="2020" class ="reqd">

Can anyone connect the dots for me?

I can now get it to work on one field by using:

`<label for="certYear">Certification Year:
<br>      
  </label>
  <input type="number" id="certYear" name="certYear"value="2020" 
onclick="myFunction()" class="reqd">`

and

 `function myFunction() {
  document.getElementById('certYear').style.backgroundColor = "white";
}`

But if I change the function to document.getElementsByClassName I get "Uncaught TypeError: Cannot set property 'backgroundColor' of undefined" Same if I try to use document.querySelectorAll (I assume in this one it's because I have to define a variable and I do not know how to enact the bg style color change any way other than above)

I suppose I could just copy the function like 10 times, once for each field and just rename the function and change the id but this seems rather inelegant.

I think I need to clarify. I want the required fields to start out as pink, but once each one is clicked, that one becomes white and remains white from then on. — maxpunches, Jan 21 '20 at 00:27
Adding class does not *change* the class. It simply adds a class as the name states. If you're not familiar with what adding a class does, you have to read more about CSS class. Some examples can be seen here: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors — Richard, Jan 21 '20 at 06:06
Does this answer your question? [How do I change the background color with JavaScript?](https://stackoverflow.com/questions/197748/how-do-i-change-the-background-color-with-javascript) — Richard, Jan 21 '20 at 06:10
AWESOME, Richard, thank you. That clarifies a lot for me. I appreciate it. Wow, that's like, an epiphanic moment. Super good. — maxpunches, Jan 21 '20 at 14:32

score 1 · Answer 1 · answered Jan 20 '20 at 23:04

1

You can do what you're looking for with pure CSS:

.reqd {
    background: pink;
}

.reqd:active {
    background: white;
}

Substitute in your proper colours, and if you need you can target just the background-color, but essentially this should do it if all you're looking for are pink text fields that are white when they are clicked on ("active").

answered Jan 20 '20 at 23:04

Ashley

897
1
5
17

I want them to remain white once clicked. – maxpunches Jan 21 '20 at 00:26

A. Meshu · Answer 2 · 2020-01-20T23:25:53.463

Actually you can do it without classes.

Do you mean something like this?

const reqInp = document.querySelectorAll('input[required]'); // same as css selector
const allInp = document.querySelectorAll('input[type="text"]'); // all inputs
for (var i=0; i < reqInp.length; i++) { // iterate the required ones
  reqInp[i].addEventListener('focus', function() { // if one of them has focus on it
    allInp.forEach(function(element){  element.style.background = 'pink'; }) // color all input to pink (or whatever you want)
    this.style.background = 'white'; // except this
  });
// edit:
  reqInp[i].addEventListener('blur', function() { // if one of them loose focus
    allInp.forEach(function(element){  element.removeAttribute('style'); }) // remove style attribute so it will return to intial state
  });
}

input {display: block; width: 100%;}
input[required] {background: pink;}https://stackoverflow.com/questions/59831874/simple-js-to-change-field-color-when-changed/59832111#

<input type="text" />
<input type="text" />
<input type="text" placeholder="required" required />
<input type="text" placeholder="required" required />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" />
<input type="text" placeholder="required" required />
<input type="text" placeholder="required" required />
<input type="text" />
<input type="text" />
<input type="text" />

No, A. Meshu, that makes whatever field I clicked on last white and the rest red, or restores the default behavior if a non-reqd field is clicked. Chalk that up to my poor explanation. I got it now though. Thank you! — maxpunches, Jan 21 '20 at 14:33

Simple JS to change field color when changed

2 Answers2