Soy muy nuevo en JS. Acabo de crear mi primera aplicación web, pero tengo problemas para ordenar mi código.

Mi HTML tiene 3 controles deslizantes de rango. Tomo el valor de cada uno y cambio el color del pulgar según ese valor (RAG). Funciona bien de la forma en que lo he implementado, pero me he repetido bastante.

 document.getElementById(complex).addEventListener("change", complexityFunction); document.getElementById(uncert).addEventListener("change", uncertaintyFunction); document.getElementById(repeat).addEventListener("change", repetitionFunction); function complexityFunction() { var x = document.getElementById(complex).value; if (x == 1) { this.className = "green"; } else if (x == 2) { this.className = "amber"; } else { this.className = "red" } } function uncertaintyFunction() { var x = document.getElementById(uncert).value; if (x == 1) { this.className = "green"; } else if (x == 2) { this.className = "amber"; } else { this.className = "red" } } function repetitionFunction() { var x = document.getElementById(repeat).value; if (x == 1) { this.className = "green"; } else if (x == 2) { this.className = "amber"; } else { this.className = "red" } }

¡Esto es lo que he intentado (entre otras cosas) que no ha funcionado!:

 document.getElementById(complex).addEventListener("change", assessmentFunction(complex)); document.getElementById(uncert).addEventListener("change", assessmentFunction(uncert)); document.getElementById(repeat).addEventListener("change", assessmentFunction(repeat)); function assessmentFunction(argument) { var x = document.getElementById(argument).value; if (x == 1) { this.className = "green"; } else if (x == 2) { this.className = "amber"; } else { this.className = "red" } }

Puede alguien por favor ayudarme?