Is there a way, to get this more flexible, variable and more compressed?

Ask the community
1 
myElements [1].onChange(()=>{if(myElements [1].valid) {myElements [1].style.backgroundColor=colorValidityOk;} else{myElements [1].style.backgroundColor=colorValidityNotOk;}});
		myElements [2].onChange(()=>{if(myElements [2].valid) {myElements [2].style.backgroundColor=colorValidityOk;} else{myElements [2].style.backgroundColor=colorValidityNotOk;}});
		myElements [3].onChange(()=>{if(myElements [3].valid) {myElements [3].style.backgroundColor=colorValidityOk;} else{myElements [3].style.backgroundColor=colorValidityNotOk;}});
		myElements [4].onChange(()=>{if(myElements [4].valid) {myElements [4].style.backgroundColor=colorValidityOk;} else{myElements [4].style.backgroundColor=colorValidityNotOk;}});
		myElements [5].onChange(()=>{if(myElements [5].valid) {myElements [5].style.backgroundColor=colorValidityOk;} else{myElements [5].style.backgroundColor=colorValidityNotOk;}});
		myElements [6].onChange(()=>{if(myElements [6].valid) {myElements [6].style.backgroundColor=colorValidityOk;} else{myElements [6].style.backgroundColor=colorValidityNotOk;}});
		myElements [7].onChange(()=>{if(myElements [7].valid) {myElements [7].style.backgroundColor=colorValidityOk;} else{myElements [7].style.backgroundColor=colorValidityNotOk;}});
		myElements [8].onChange(()=>{if(myElements [8].valid) {myElements [8].style.backgroundColor=colorValidityOk;} else{myElements [8].style.backgroundColor=colorValidityNotOk;}});
		myElements [9].onChange(()=>{if(myElements [9].valid) {myElements [9].style.backgroundColor=colorValidityOk;} else{myElements [9].style.backgroundColor=colorValidityNotOk;}});
		myElements[10].onChange(()=>{if(myElements[10].valid) {myElements[10].style.backgroundColor=colorValidityOk;} else{myElements[10].style.backgroundColor=colorValidityNotOk;}});
		myElements[11].onChange(()=>{if(myElements[11].valid) {myElements[11].style.backgroundColor=colorValidityOk;} else{myElements[11].style.backgroundColor=colorValidityNotOk;}});
		myElements[12].onChange(()=>{if(myElements[12].valid) {myElements[12].style.backgroundColor=colorValidityOk;} else{myElements[12].style.backgroundColor=colorValidityNotOk;}});
		myElements[13].onChange(()=>{if(myElements[13].valid) {myElements[13].style.backgroundColor=colorValidityOk;} else{myElements[13].style.backgroundColor=colorValidityNotOk;}});
		myElements[14].onChange(()=>{if(myElements[14].valid) {myElements[14].style.backgroundColor=colorValidityOk;} else{myElements[14].style.backgroundColor=colorValidityNotOk;}});

For example somehow push this though a LOOPING ?
Somwone any idea of how to mage this in a more dynamic way, instead of coding it static onto the page for each of the event-triggers?

1452×328 10.2 KB

2

Ok, just forget about my silly question, i already got it!

3

here is my suggestion

function onChangeHandler(event) {
 const element = event.target;
 
 element.style.backgroundColor = element.valid ? colorValidityOk : colorValidityNotOk;
}

Then call that on a loop

myElements.forEach(element => element.onChange(onChangeHandler))

And you went from 15 lines of code to 5 clean code

4

Thank you quentin, i ended up with this here…

for (let i = 1; i <= myElements.length-2; i++) {
   myElements[i].onChange(()=> {
      if (myElements[i].valid) {
        myElements[i].style.backgroundColor=colorValidityOk
      } 
      else{
      myElements[i].style.backgroundColor = colorValidityNotOk;
          }
       });
}

That has worked for me.

I can’t realy explain it, but you even do not need to put it into a function.
It works like it is.

Anyway → that looks short clean and useful…

element.style.backgroundColor = element.valid ? colorValidityOk : colorValidityNotOk;

The substraction of (-2) is just a little fix inside my code.

myElements.length-2 <----- this was code-specific modification (only in my case).
5

Additionaly, just remembered another option, of how to solve such problems mentioned by my own above…

…should also be a posssible solution.