Tengo el siguiente código y me gustaría que la función cambioId
al ser llamada en los condicionales tarde varios segundos en aparecer; ya intenté de varias formas, agregando un setTimeout
y, sin embargo, no me sirvió. Es decir quiero que la imagen desaparezca rápido y el cambio de id tarde en hacerse, por ende, tarda en aparecer.
Además, otro error que no puedo lograr solucionar es que cada vez que se hace clic en la imagen la maquina de escribir superpone los textos y se suman los tiempos de la constante escritura; intenté resolverlo con un clearSetTimeOut
pero tampoco pude.
En resumen, me gustaría que la función cambio de ID tenga un retardo de dos segundos y que la constante escribir, al ser llamada, no se sumen los datos que esta tiene cada vez que se llama.
let imag = document.getElementById("imag");
let imag2 = document.getElementById("imag2");
let contadorClick = 0;
function cambioId(idACambiar = "", _idNuevo = "") {
let a = idACambiar;
let b = _idNuevo;
console.log(a);
console.log(b);
a.id = b;
/* setTimeout(function(){cambioId(idACambiar, _idNuevo)},5000); */
}
const escritura = (texto = "", tiempoEscritura = 0, tiempoBorrado = 0, etiquet = "") => {
let contador = 0;
etiquet.innerHTML = "";
let j = texto.length;
let caracteres = texto.split("");
const escribir = function() {
if (contador == texto.length) {
etiquet.style.borderRightColor = "black";
etiquet.innerHTML = texto.substring(0, j);
j--;
if (j < 0) {
j = texto.length;
contador = 0;
}
setTimeout(escribir, tiempoBorrado);
} else {
etiquet.innerHTML += caracteres[contador];
contador++;
let variable = (texto.length - 43);
if (contador >= variable & contador <= texto.length & contador % 2 == 0) {
console.log("ahora aparezco");
etiquet.style.borderRightColor = "white";
} else {
etiquet.style.borderRightColor = "black";
}
setTimeout(escribir, tiempoEscritura);
}
};
escribir();
}
imag.addEventListener("click", function cambiarImag() {
contadorClick++;
console.log(contadorClick);
if(contadorClick>=4){
contadorClick = 0;
}
if(contadorClick%2 != 0) {
document.getElementById("uno").id = "unoDespues";
cambioId(this, "imag2");
document.getElementById("padreOculto").id = "padreVisible";
escritura(" Hola!!! ", 80 , 10, document.getElementById("texto"));
console.log(cambioId);
}
else {
cambioId(this, "imag");
document.getElementById("unoDespues").id = "uno";
document.getElementById("padreVisible").id = "padreOculto";
}
})
#imag {
width: 12em;
height: 50vh;
margin-top: 10em;
border-radius: 60%;
border: 2px solid rgb(255, 255, 255);
}
#imag2 {
width: 5em;
margin-left: 50%;
border: 1px solid rgb(255, 255, 255);
height: 5em;
margin-top: 10em;
border-radius: 0;
}
#padreOculto {
position: absolute;
opacity: 0;
height: 0;
width: 0;
padding: 0;
margin: 0;
}
#padreVisible {
opacity: 1;
margin-left: 1.5em;
width: 13em;
height: 50vh;
background-color: wheat;
}
#uno {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(2, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-areas:
"contit imag imag"
"contit imag imag";
background-color:rgb(255, 255, 93);
}
#unoDespues {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 0.5fr 2.5fr;
grid-column-gap: 0px;
grid-row-gap: 0px;
grid-template-areas:
"contit imag imag"
"contit padreVisible padreVisible";
background-color:rgb(255, 255, 93);
}
<div id="padreOculto"><p id="texto"></p></div>
<img src="https://www.semana.com/resizer/DWerBFY8O0Tc0ZsQnFpA1LJXOR0=/1200x675/filters:format(jpg):quality(50)//cloudfront-us-east-1.images.arcpublishing.com/semana/V3EVP6ZUEZFY7AIGESM76I43GE.jpg" alt="" id="imag">
imagen
, creo que debería ser soloimag
.imag2
,uno
yunoDespues