Buen día, tengo una función que guarda datos en el localstorage y además los revisa y les añade estilos dependiendo de si el valor es correcto o no, sin embargo, esta función la tengo que usar en varios archivos con contenido html, por lo que le pasé como parámetros un array con los valores correctos, el número de progresión y el número de ejercicio; la cosa es que ahora no sé cómo llamarla y añadirle el parametro array. Hasta el momento he intentado esto sin embargo no me funciona
function colores(respuestas, numprogresion, numejercicio) {
let inputres = [];
let total = respuestas.length;
let saveButton = document.getElementById('P9E1REVs');
for (var i = 0; i < total; i++) {
inputres[i] = document.getElementById('p' + numprogresion.toString() + 'e' + numejercicio + 'txt' + (i + 1).toString());
}
saveButton.addEventListener('click', () => { //CUANDO SE DA CLICK AL BOTON, GUARDA EN EL LOCAL STORAGE
for (var i = 0; i < total; i++) {
localStorage.setItem('serverValues' + i.toString(), inputres[i].value);
}
});
window.addEventListener('DOMContentLoaded', () => { //CUANDO CARGA LA PAGINA, SE REFRESCA LUEGO DEL SUBMIT
for (var i = 0; i < total; i++) {
let savedServer1 = localStorage.getItem('serverValues' + i.toString());
if (savedServer1) { //SI ESA VARIABLE TIENE ALGO
inputres[i].value = savedServer1; //AL INPUT TEXT SE LE DA EL VALOR QUE HAY EN LA VARIABLE
if (inputres[i].value == respuestas[i]) { //SI EL VALOR DEL INPUT TEXT ES IGUAL AL DEL ARRAY, ANADE LA CLASE DE CORRECTO
inputres[i].classList.add('RespuestaCorrecta');
} else {
inputres[i].classList.add('RespuestaIncorrecta');
}
}
}
});
function eliminartodo() {
if (confirm("Estas seguro")) {
localStorage.clear();
for (var i = 0; i < total; i++) {
document.getElementById('p9e1txt' + (i + 1).toString()).classList.remove('RespuestaCorrecta');
document.getElementById('p9e1txt' + (i + 1).toString()).classList.remove('RespuestaIncorrecta');
}
}
}
}
<form method="post">
<img src="images/Progresion9img/img13.png" width=250px>
<label for="p9e1txt1">Área </label><input type="Text" size=4 maxlength="8" name="p9e1txt1" id="p9e
1txt1">
<img src="images/Progresion9img/img14.png" width=250px>
<label for="p9e1txt2">Área </label><input type="Text" size=4 maxlength="8" name="p9e1txt2" id="p9e1txt2"><br><br>
<img src="images/Progresion9img/img15.png" width=180px>
<label for="p9e1txt3">Área </label><input type="Text" size=4 maxlength="8" name="p9e1txt3" id="p9e1txt3">
<img src="images/Progresion9img/img16.png" width=250px>
<label for="p9e1txt4">Área </label><input type="Text" size=4 maxlength="8" name="p9e1txt4" id="p9e1txt4"><br><br>
<img src="images/Progresion9img/img17.png" width=320px height="210px">
<label for="p9e1txt5">Área </label><input type="Text" size=4 maxlength="8" name="p9e1txt5" id="p9e1txt5">
<img src="images/Progresion9img/img18.png" width=250px>
<label for="p9e1txt6">Área </label><input type="Text" size=4 maxlength="8" name="p9e1txt6" id="p9e1txt6"><br><br>
<img src="images/Progresion9img/img19.png" width=200px>
<label for="p9e1txt7">Área </label><input type="Text" size=4 maxlength="8" name="p9e1txt7" id="p9e1txt7">
<img src="images/Progresion9img/img20.png" width=250px>
<label for="p9e1txt8">Área </label><input type="Text" size=4 maxlength="8" name="p9e1txt8" id="p9e1txt8"><br><br>
<img src="images/Progresion9img/img21.png" width=250px>
<label for="p9e1txt9">Área </label><input type="Text" size=4 maxlength="8" name="p9e1txt9" id="p9e1txt9">
<img src="images/Progresion9img/img22.png" width=280px height=170px>
<label for="p9e1txt10">Área </label><input type="Text" size=4 maxlength="8" name="p9e1txt10" id="p9e1txt10"><br><br>
<img src="images/Progresion9img/img23.png" width=250px>
<label for="p9e1txt11">Área </label><input type="Text" size=4 maxlength="8" name="p9e1txt11" id="p9e1txt11">
<button type="submit" value="" class="botonesrevisar" name="P9E1REV" id="P9E1REVs"></button>
<input type="reset" value="" class="botonesreintentar" onclick="eliminartodo()">
</form>
<script src="js/script7.js">
let respuestas = [999.4,
456.3,
812.5,
419.7,
2268,
88.2,
2300.1,
704.4,
5225.8,
522.5,
336.72
];
colores(respuestas, 9, 1);
</script>