JavaScript - No me carga ni el usuario ni la imagen

Val: 4

No me carga ni el usuario ni la imagen

Publicado por Andres (4 intervenciones) el 07/05/2020 04:57:36

Hola, soy principiante y estoy haciendo un pequeño programa para practicar.La idea del programa esque cuando yo presione algún icono, como lo puede ser o el de hombre o el de la mujer y después de elegirlo me aparecerá para poner un nombre en este y así guardar en una variable el nombre que el usuario puso y ademas se guarde si este selecciono mujer o hombre. Después al presionar siguiente me aparecerá una nueva pagina en la que quiero que aparezca el nombre que había puesto el usuario en la primera pagina y ademas me cargue una imagen de un hombre o una mujer, dependiendo de cual se había seleccionado en la primera pagina

Este es el código HTML de la primera pagina:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bonilla Cards</title>

    <link rel="stylesheet" href="styles/styles.css">

    <script src="https://kit.fontawesome.com/157a0bdba1.js" crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">

</head>

<body>

    <header>

        <div>

            <h1>Bonilla Card Game</h1>

        </div>

    </header>

    <main>

        <div class="contenedor cajas">

            <div class="caja1 " id="cj1">

                <i class="fas fa-mars"></i>

                <label id="ocultar" style="display: none;">Escribe tu nombre  <input type=" text " id="in1"></label>

            </div>

            <div class="caja2" id="cj2">

                <i class="fas fa-venus"></i>

                <label id="ocultar2" style="display: none;">Escribe tu nombre <input type="text" id="in2"></label>

            </div>

        </div>

        <div class="siguiente" id="siguiente">

            <a id="link">Siguiente</a>

        </div>

    </main>

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

</body>

</html>

Este es el código HTML de la segunda:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Bonilla Card Game</title>

    <link rel="stylesheet" href="styles/styles2.css">

    <script src="https://kit.fontawesome.com/157a0bdba1.js" crossorigin="anonymous"></script>

    <link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">

</head>

<body>

    <header>

        <ul class="encabezado2">

            <li>

                <h1 id="bienvenida">Bienvenido/a</h1>

            </li>

            <div class="parts">

                <li>

                    <h2>Bonilla Card Game</h2>

                </li>

                <li><a href="index.html">Volver</a></li>

            </div>

        </ul>

    </header>

    <main class="jugador">

        <div class="avatar" id="ava">

            <img id="avatarr" alt="imagen">

        </div>

    </main>

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

</body>

</html>

y por ultimo este es el código de js:

//abrir variables

const abrirCaja1 = document.querySelector('#cj1');

const abrirCaja2 = document.querySelector('#cj2');

const siguiente = document.querySelector('#siguiente');

const nombreUsuario = document.querySelector('#in1');

const nombreUsuario2 = document.querySelector('#in2');

let link = document.querySelector('#link');

const bienvenida = document.querySelector('#bienvenida');

const avatarr = document.querySelector('#avatarr');

const divAvatar = document.querySelector('#ava');

//abrir los generos

let clickCaja1 = abrirCaja1.addEventListener('click', () => {

    document.querySelector('#ocultar').style.display = "block";

});

let clickCaja2 = abrirCaja2.addEventListener('click', () => {

    document.querySelector('#ocultar2').style.display = "block";

});

let siguientePagina = siguiente.addEventListener('click', () => {

    if (nombreUsuario.value === "" && nombreUsuario2.value === "") {

        alert('Debes colocar tu nombre para continuar');

    } else {

        link.href = "game.html";

});

//Agregar avatar

let seleccionarAvatar = () => {

    if (clickCaja1 = true) {

        avatarr.src = "imagenes/hombreA.png";

    } else {

        avatarr.src = "imagenes/mujerA.jpg";

Gracias de antemano.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

No me carga ni el usuario ni la imagen

Publicado por Costero (10 intervenciones) el 08/05/2020 19:08:49

En Html5 puedes utilizar Local storage. Esto te puede dar una idea:

let siguientePagina = siguiente.addEventListener('click', () => {

    if (nombreUsuario.value === "" && nombreUsuario2.value === "") {

        alert('Debes colocar tu nombre para continuar');

    } else {

        name = nombreUsuario.value;

        if(name === "") {

             name = nombreUsuario2.value;

        localStorage.setItem("name",name);

        link.href = "game.html";

});

let getNombre = () => {

    const player = document.querySelector('#header');

    player.innerHTML = "Bonilla Card Game " + localStorage.getItem("name");

    return localStorage.getItem("name");

En game.html

<div>

    <h1 id="header">Bonilla Card Game</h1>

</div>

<script type="text/javascript">

    getNombre();

</script>

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

No me carga ni el usuario ni la imagen

Publicado por andrew (4 intervenciones) el 10/05/2020 01:49:24

Muchas gracias costero, se ve que eres re bueno para todo esto.

Valora esta respuesta

Comentar

No me carga ni el usuario ni la imagen

Publicado por Costero (10 intervenciones) el 10/05/2020 22:54:26

No por nada. No soy bueno, es que llevo mucho tiempo en esto. Y como dice el dicho: Mas sabe el diablo por viejo que por diablo.
Salu2

Valora esta respuesta

Comentar