0

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>

1 respuesta 1

3

Quita src="js/script7.js" o quita lo de dentro.

Si tiene src no puede tener algo dentro.

            <script src="js/script7.js">
                    let respuestas = [999.4,

Tiene que ser así:

            <script>
                    let respuestas = [999.4,

Alternativa:

            <script src="js/script7.js"></script>

Sugerencia:

  • Hacer un repositorio de GitHub con todos los archivos, para que la gente pueda ver en qué estás trabajando, así todo el mundo puede corregir el código con mayor facilidad. En internet hay muchos tutoriales de cómo subir un repositorio.
2
  • 1
    Muchas gracias, definitivamente era eso lo que tenia que hacer, colocando el script al inicio del documento y llamar la función posteriormente. Muchas gracias, me ha sido de grran ayuda.
    – Ji Mena
    Commented el 28 may. a las 13:09
  • @JiMena Para poner el script al inicio y que cargue cuando ya haya cargado la página, se puede usar document.onreadystatechange Dejo un enlace donde explican cómo lo hacen. Detectar cuando DOM esta listo en JS puro
    – ArtEze
    Commented el 28 may. a las 21:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.