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

Question

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?

Quentin · Accepted Answer

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

Code-Ninja · Answer

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).

Code-Ninja · Answer

Additionaly, just remembered another option, of how to solve such problems mentioned by my own above... https://community.wix.com/velo/forum/coding-with-velo/looking-for-some-suggestions-on-how-to-go-about-refactoring-my-code ...should also be a posssible solution.

Code-Ninja · Answer

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

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

How can we make the product better?