0

estoy intentando crear una pagina con HTML, en la cual en determinada sección, al presionar un botón aparezca una imagen y que, al tocarlo por segunda vez, esta desaparezca nuevamente. El problema es que necesito 3 de dichos botones e intenté definir una función con 2 parámetros para poder "reciclarla" en cada uno de ellos. La primer parte de la función responde bien, pero al realizar el segundo click, no hay cambio alguno. Entiendo que problema viene con el segundo parámetro, ya que cundo lo elimino y creo un "contador" único para los 3 botones, la función corre como debería, aunque no es del todo funcional, ya que se debe hacer un clic extra por botón al cambiar de uno a otro. Quisiera saber si hay algún modo de que esto funcione o, en todo caso, que debería plantear realmente para que funcione. (Disculpen si es un error muy básico, es el primer HTML que creo y JS lo he usado, pero para funciones pequeñas y sin sentido en un curso online hace ya bastante tiempo)

Código HTML

     <ul>
         <li>
            <button id="colegio" onclick="desplegar (fcolegio, contadora)">Escuela Secundaria Springfield.</button>
             <div class= "fcolegio"></div> 
         </li>
         <li>
             <button id="uni" onclick="desplegar (funi, contadorb)">Escuela Tecnológica Springfield.</button>
             <div class= "funi"></div>
         </li>
         
         <li>
             <button id="payasos" onclick="desplegar (fpayasos, contadorc)">Escuela de Payasos Krusty.</button>
             <div class= "fpayasos"></div>
         </li>
     </ul> 

Código CSS

.fcolegio {
  width: 0px;
  height: 0px;
}
.funi {
  width: 0px;
  height: 0px;
}
.fpayasos {
  width: 0px;
  height: 0px;
}

.fcolegio.foto{
  width: 512px;
  height: 280px;
  background-image: url(Img/Homero\ Adolescente.png);
  grid-column: 1/3;
  margin: 15px;
}
.funi.foto{
  width: 512px;
  height: 280px;
  background-image: url(img/Homero\ Universitario.jpg);
  background-size: cover;
  grid-column: 1/3;
  margin: 15px;
}
.fpayasos.foto{
  width: 512px;
  height: 527px;
  background-image: url(img/Homero\ payaso.jpg);
  background-size: cover;
  grid-column: 1/3;
  margin: 15px;
}

Código JS

var colegio = document.getElementById ('colegio');
var universidad = document.getElementById ('uni');
var payasos = document.getElementById ('payasos');

var fcolegio = document.querySelector ('.fcolegio');
var funi = document.querySelector ('.funi');
var fpayasos = document.querySelector('.fpayasos');
contadora=0;
contadorb=0;
contadorc=0;
function desplegar (objeto, contenedor) {
    if (contenedor===0){
        contenedor=1;
        objeto.classList.add('foto');} 
        else{     
        contenedor=0;
        objeto.classList.remove('foto');}
    } 
2
  • Revisa el código suministrado, creo que se encuentra incompleta la parte del javascript Commented el 2 mar. 2023 a las 18:27
  • 1
    Hola, lo comparé con lo que tengo en mi archivo, y subí todo lo que tengo. Si falta algo a nivel técnico, desconozco que sea o como debería agregarlo.
    – Agus Ailen
    Commented el 2 mar. 2023 a las 18:42

1 respuesta 1

0

var colegio = document.getElementById ('colegio');
var universidad = document.getElementById ('uni');
var payasos = document.getElementById ('payasos');

var fcolegio = document.querySelector ('.fcolegio');
var funi = document.querySelector ('.funi');
var fpayasos = document.querySelector('.fpayasos');

contadora = true;
contadorb = true;
contadorc = true;
contador = false;

function desplegar( objeto, id ) {
    if( id.id == "colegio" ) {
        contador = getContador( contadora );
        contadora = contador;
    }
    else if( id.id == "uni" ) {
        contador = getContador( contadorb );
        contadorb = contador;
    }
    else if( id.id == "payasos" ) {
        contador = getContador( contadorc );
        contadorc = contador;
    }
    if( ! contador ) {
        objeto.classList.add( 'foto' );
    } 
    else{     
        objeto.classList.remove( 'foto' );
    }
}

function getContador( si_no ) {
    return si_no == false;
}
.fcolegio {
  width: 0px;
  height: 0px;
}
.funi {
  width: 0px;
  height: 0px;
}
.fpayasos {
  width: 0px;
  height: 0px;
}

.fcolegio.foto{
  width: 512px;
  height: 280px;
  background-image: url(Img/Homero\ Adolescente.png);
  grid-column: 1/3;
  margin: 15px;
}
.funi.foto{
  width: 512px;
  height: 280px;
  background-image: url(img/Homero\ Universitario.jpg);
  background-size: cover;
  grid-column: 1/3;
  margin: 15px;
}
.fpayasos.foto{
  width: 512px;
  height: 527px;
  background-image: url(img/Homero\ payaso.jpg);
  background-size: cover;
  grid-column: 1/3;
  margin: 15px;
}
<ul>
     <li>
        <button id="colegio" onclick="desplegar (fcolegio, colegio )">Escuela Secundaria Springfield.</button>
         <div class= "fcolegio"></div> 
     </li>
     <li>
         <button id="uni" onclick="desplegar (funi, uni )">Escuela Tecnológica Springfield.</button>
         <div class= "funi"></div>
     </li>
     
     <li>
         <button id="payasos" onclick="desplegar (fpayasos, payasos )">Escuela de Payasos Krusty.</button>
         <div class= "fpayasos"></div>
     </li>
 </ul>

Como podés ver, hice unos pequeños cambios en tu código.
En principio, en el "html", llamo a desplegar pasándole como parámetros, la clase y el id.
Dentro de desplegar, mediante un bloque if/else, identifico al objeto que llama, e instancio la variable contador mediante la función getContador a la cual le paso como argumento la variable contador que definí para cada objeto, y me devuelve el valor contrario.
Solo resta aplicar el proceso correspondiente.

2
  • Hola, recién probé el código y funcionó perfectamente, realmente muchas gracias!!!! Desconocía ese uso para un booleano, supongo que seguiré investigando
    – Agus Ailen
    Commented el 3 mar. 2023 a las 20:18
  • @Agus Un placer ayudarte!! Commented el 3 mar. 2023 a las 21:48

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.