0

desde hace casi una semana que estoy estancado con una parte de mi código. Voy a tratar de resumir un poco la situación. Me dieron un proyecto que tengo que realizar del juego del ahorcado, mi problema surge cuando estoy en un html distinto del original el cual debe guardar una palabra y luego iniciar el juego. Realicé la función .push(), utilicé localStorage, traté de invocar la función en diferentes lugares, moví la función de un archivo a otro y no logro obtener el resultado que quiero. Hay partes de código que voy a enseñar a continuación que están comentadas porque me daban error o simplemente no funcionan. Son 4 archivos en total, 2 html y 2 js. Sé que es un poco largo pero anteriormente formulé una pregunta con solo una parte (el array, y el push y estaba correcto). Para agregar palabras hay varios requisitos que me piden, por ejemplo, nada de caracteres especiales, el uso sólo de mayúsculas; en el primer input (id = 'letra00') puedo alterar la letra ingresada de acuerdo a los requisitos que me piden pero en el input (id = 'texto00') si pongo el mismo código para alterar los caracteres ingresados me da error. Sé que es largo pero no sé como explicar mi problema sino muestro parte de los archivos. Sepan disculpar y agradecería que alguien se tome el tiempo en ayudarme porque no puedo avanzar en el proyecto. Gracias.

//JS numero 1 (challenge02.js)

//Función para reemplazar el caracter por la letra
String.prototype.replaceAt=function(index, character) { return this.substr(0, index) + character + this.substr(index+character.length); }

let letrasUsadas = document.getElementById('letras-usadas');

let contenedorLetras = document.getElementById('contenedor-letras');

let palabras = ['CASA','PERRO','GATO'];

localStorage.setItem("palabras",palabras);

let palabra = palabras[Math.floor(Math.random()*palabras.length)];

//Reemplazo la palabra por guiones
let palabraConGuiones = palabra.replace(/./g, "_ ");


let contadorFallos = 7;

function agregarPalabra(){

    let agrego = document.getElementById('texto00').value;

    agrego = agrego.toUpperCase();

    if(agrego !== ''){

        palabras.push(agrego);

    }

}

console.log(palabras);
// HTML numero 1 (challenge02.html)

<body>

     <input type="text" maxlength="1" placeholder="Ingrese su Letra" id="letra00">

     <button id='boton00'>Evaluar letra</button>

     <p id="salida00"></p>
     <div id="vida">El numero de vidas que te quedan son: 7</div>
     <div>
          <img src="Imagenes\DEAD.png" style="display: none;" id="dead">
          <canvas id="pizarra">                          
               Tu navegador no acepta Canvas
          </canvas>
          <div id="letras-usadas"></div>
          <img src="Imagenes\Parca TRISTE.png" style="display: none;" id="parca-triste">

     </div>
     <div id="contenedor-letras"></div>

     <div id="ahorcado00"></div>

     <div id="ganador00">
          <p>Victoria</p>
          <p>Enhorabuena</p>
     </div> 

     <script src='challenge02.js'></script>

     <script src='challenge02-v2.js'></script>

     <script src="dibujo-canvas.js"></script>

     <script src="agregar-palabra.js"></script>

     <script src="modificar-palabra.js"></script>

</body>

//JS numero 2 (agregar-palabra.js)

/*document.getElementById('texto').addEventListener('keyup', function(){
    
    this.value = this.value.replace(/[^a-zA-Z ]/g, "")
    
    this.value = this.value.normalize("NFD").replace(/[\u0300-\u036f]/g, "")

    this.value = this.value.toUpperCase();

});*/

let datos = [];

localStorage.getItem('palabras',palabras);

/*var botonAdicionar = document.querySelector('#agregar-palabra');

botonAdicionar.addEventListener('click',function(){
    
    let agrego = document.getElementById('texto').value.toUpperCase();
    
    palabras.push(agrego);

});*/


/*function agregarPalabra(){

    let dato = document.getElementById('texto').value.toUpperCase();

    datos.push(dato);

}
*/

//localStorage.getItem('palabras');


function mostrarPalabra(){

    let resultado = document.getElementById('resultado');

    resultado.innerHTML = '';

    for(let dato of datos){

        let datoParrafo = document.createElement('p');

        datoParrafo.innerText = dato;

        resultado.appendChild(datoParrafo);

    }

}
  // HTML numero 2 (challenge02-v2-02.html) 
  
  <body>   

    <input type='text' id="texto00"/>
    
    <input type='button' id="agregar-palabra" value = 'Guardar Palabra'onclick= 'agregarPalabra()'/>

    <input type='button' id="mostrar-palabra" value = 'Mostrar palabras' onclick= 'mostrarPalabra()'/>

    <br>
    
    <br>
    
    <button><a href="challenge02.html">Iniciar Juego</a></button>

    <div id="resultado"></div>

      <script src='challenge02.js'></script>

      <script src='challenge02-v2.js'></script>
   
      <script src="agregar-palabra.js"></script>
    
   </body>
   

1 respuesta 1

3

Te estás haciendo un gran lio con el manejo de localStorage() por varios motivos:

  1. Cuando haces esto, tan solo se guardan datos serializados (separados por comas), no un array como tu pretendes, porque localStorage() solo almacena cadenas de texto, no almacena ni arrays ni objetos como tales directamente nunca:
localStorage.setItem("palabras",palabras);

Para conseguir almacenar objetos o arrays en localStorage debes convertirlo a formato JSON mientras lo estableces, de este modo:

localStorage.setItem("palabras",JSON.stringify(palabras))

Es decir, usando la función JSON.stringify() que permite convertir a texto en formato JSON tanto objetos como arrays.

  1. Y cuando lo recuperas, debes hacer la conversión inversa, usando JSON.parse(), es decir, así:
palabras = JSON.parse(localStorage.getItem("palabras"))
  1. Sabiendo eso, lo primero que debes hacer es corregir esto:
let palabras = ['CASA','PERRO','GATO'];
localStorage.setItem("palabras",palabras);

por esto.

let palabras = ['CASA','PERRO','GATO'];
localStorage.setItem("palabras",JSON.stringify(palabras))

para ya tener almacenada la clave palabras en el localStorage que después se invocará desde la función agregarPalabra().

  1. Partiendo de los puntos 1 y 2, tu función agregarPalabra() debería quedar así para guardar correctamente los datos en localStorage():
function agregarPalabra(){
    let agrego = document.getElementById('texto00').value;
    agrego = agrego.toUpperCase();
    palabras = JSON.parse(localStorage.getItem("palabras"))
    if(agrego !== ''){
        palabras.push(agrego);
    }
    localStorage.setItem("palabras",JSON.stringify(palabras))

    // esto es para comprobar si está bien guardado en la consola:
    console.log(palabras)
    console.log(JSON.parse(localStorage.getItem("palabras")))
}

A partir de aquí arregla el resto de tu código, sabiendo que ahora sí que estas guardando correctamente los datos en localStorage() y que si quieres usar la variable palabras como un array primero debes recuperarla de allí con el JSON.parse() tal como acabo de explicar.

14
  • Es verdad me faltaba eso pero no puedo agregar palabras todavía al presionar el boton: prnt.sc/vpPRpxFAC1LO
    – Raul
    el 29 may. 2022 a las 0:00
  • Si veo que funciona bien, por eso te decía de que quizás el error se encuentre en el otro archivo js que no puse para que no quede tan largo el código, lo quité del primer js (challenge02.js) y lo añadí a otro archivo js lo tengo en el primer html pero en el segundo html (challenge02-v2-02.html) no lo incorporé ya que solo modifica el input del primer html es decir la letra ingresada y contiene el loop para comprobar si el usuario acerto con la letra: prnt.sc/XBAANX5Tq8u9 ....... prnt.sc/RQ4U1QKuwK3Z ..... prnt.sc/y0_VUvq3oNzN
    – Raul
    el 29 may. 2022 a las 0:24
  • 1
    Bueno, he hecho un poco de reestructuración de tu código y he jugado con el un rato, pero aunque funciona no está terminado del todo. Aqui lo tienes todo: jsfiddle.net/7bzk3vax
    – masterguru
    el 29 may. 2022 a las 1:37
  • 1
    Y aqui te lo dejo en un pastebin: pastebin.com/SK8RkgFc en un solo archivo todo junto. Juega con el y arregla que lo que falte. Saludos!
    – masterguru
    el 29 may. 2022 a las 1:43
  • 1
    (borremos todos los comentarios y dejemos solo los ultimos enlaces, sino nos crujen)
    – masterguru
    el 29 may. 2022 a las 1:44

Tu Respuesta

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

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