3

Quisiera saber como puedo ejecutar dos códigos diferentes en JavaScript con un evento "click". Por ejemplo:

Primero quiero que se ejecute este código cuando presiono click:

let footer1 = document.getElementById("Infooter");

footer1.addEventListener("click", function(){
let footer3 = document.getElementById("Infooter3");
let origfooter = document.getElementById("footer");

origfooter.style.height = "50%";
footer2.style.top = "60%";
});

Después quiero presionar nuevamente click y que se ejecute este código:

footer1.addEventListener("click", function(){
let footer3 = document.getElementById("Infooter3");
let origfooter = document.getElementById("footer");

origfooter.style.height = "25%";
footer2.style.top = "25%";
});
4
  • Puedes usar tanto el click como el dblclick. Revisa esto: developer.mozilla.org/en-US/docs/Web/API/Element/dblclick_event el 6 jun. 2021 a las 4:35
  • Puedes compartir tu código html? Creo que tengo una respuesta para tu pregunta pero necesitaría ver tu html. el 6 jun. 2021 a las 4:50
  • En el primer evento click eliminas ese listener y le pones el listener al click con la función del segundo y el el segundo quitas nuevamente el listener y le pones el del primero. el 6 jun. 2021 a las 5:17
  • O simplemente tienes solo el evento click y dentro del evento click preguntas si tiene la clase Dos si no la tiene entonces ejecutas el primer bloque y le agregas lel clases Dos. En el segundo click como ya existe el clases Dos ejecutas el segundo bloque y eliminas el class Dos. También puedes aprovechar en poner en los class el estilo que desea el 6 jun. 2021 a las 5:22

4 respuestas 4

2

Si lo que buscas es que cada vez que se hace clic vaya del primer código al segundo y luego regrese al primero, puedes tener un único evento y hacer toogle, para ejecutar un código u otro con una variable de control, que vas aumentando y luego, dependiendo de si es par o impar, aplicas un tamaño o el otro, por ejemplo:

html, body{
    height: 100%;
}
div{
    height: 10%;
}

#Infooter3  {
  background-color: yellow;
  height: 10%;
}

#footer {
  background-color: orange;
  height: 15%;
}
<body>
  <div id="Infooter">¡haz clic aquí!</div>
  <div id="Infooter3">f3</div>
  <div id="footer">f</div>
</body>
<script>
  let dvInfooter = document.getElementById("Infooter");
  let control=-1;
  dvInfooter.addEventListener("click", function(){
    let origfooter = document.getElementById("footer");
    control += 1;
    if (control%2==0) {
      origfooter.style.height = "50%";
    } else {
      origfooter.style.height = "25%";
    }
  });
</script>

2

Puedes usar el evento de doble click (dblclik) El Código te quedaría así:

let footer1 = document.getElementById("Infooter");

let footer3 = document.getElementById("Infooter3");
let origfooter = document.getElementById("footer");

footer1.addEventListener("click", function(e){

origfooter.style.height = "50%";
footer2.style.top = "60%";
});

footer1.addEventListener("dblclick", function(e){

origfooter.style.height = "25%";
footer2.style.top = "25%";
});
1
  • Te sirvió la respuesta? Recuerda marcar como respuesta esperada si te sirvió, no solo por mi, sino también para que otros que consulten la pregunta puedan beneficiarse también? el 6 jun. 2021 a las 18:31
1

podes hacer un ternario que tome el valor actual y lo cambie por el que corresponda, esto también fuerza el valor inicial de 25%.

let footer1 = document.getElementById("Infooter");

footer1.addEventListener("click", () =>{

    let Infooter3 = document.getElementById("Infooter3");
    let footer = document.getElementById("footer");

    Infooter3.style.height = Infooter3.style.height=="25%"?"50%":"25%"
    footer.style.height    = footer.style.height   =="25%"?"60%":"25%"

});

También podrías agregar o quitar una Class en la etiqueta html con una clase

Infooter3.classList.toggle("mystyle");
0

Podrías hacer algo como esto: Nota: En lo personal me gusta tener mis referencias a elementos HTML a todo el inicio de mi archivo .js, esa sección de @elements la puedes ignorar

// @elements
const elFooter = document.getElementById('Infooter');
const elFooter2 = document.getElementById('Infooter2');

// flags
let dispatchFunction1 = true;

// @actions
const function1 = () => {
    elFooter.style.height = '50%';
    footer2.style.top = '60%';
};

const function2 = () => {
    elFooter.style.height = '25%';
    footer2.style.top = '25%';
}    

elFooter.addEventListener('click', () => {
    if (dispatchFunction1) {
        function1();
    } else {
        function2();
    }

    dispatchFunction1 = !dispatchFunction1;
});

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.