2

necesito temporizar la imagen para que aparezca unos segundos y desaparezca pero no me esta funcionando el codigo, ¿me pueden ayudar?

`

function mostrar(id){ img=document.getElementById(id); 
                      img.innerHTML='<img  src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIAYA8hTE0vOHlJm4y8DlUYvC9GTcKuJtwWze-7RtzNyb9SGi6JWnmeYgqAkHBVWflaDM&usqp=CAU">';
                    setTimeout(mostrar, 4000);}
<button  onClick="mostrar('imagen')" >Aceptar</button>
<div id='imagen'></div>

`

2
  • Darle click para que aparezca y que unos segundos después desaparezca?
    – JoseMgz_Ux
    el 18 nov. 2022 a las 14:21
  • eso es, que desaparezca a los segundos el 18 nov. 2022 a las 14:24

2 respuestas 2

0

Lo puedes hacer de esta manera:

Modificando los atributos style del elemento que quieras ocultar.

JavaScript:

function mostrar(id){ 
    img=document.getElementById(id); 
    img.innerHTML='<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIAYA8hTE0vOHlJm4y8DlUYvC9GTcKuJtwWze-7RtzNyb9SGi6JWnmeYgqAkHBVWflaDM&usqp=CAU">';

    setTimeout(() => {
       img.style.display = "none"
       //imgHidde.style.visibility = "collapse"
       //imgHidde.style.visibility = "hidden"
    }, 4000);
}
  

Diferencias: Creditos: Pekka

visibility:hidden significa que, a diferencia de ella, la etiqueta no es visible, pero se le asigna espacio en la página. La etiqueta se representa, simplemente no se ve en la página.

display:none significa que la etiqueta en cuestión no aparecerá en la página en absoluto (aunque aún puede interactuar con ella a través del DOM). No habrá espacio asignado para ello entre las otras etiquetas.

visibility:collapse Oculta un elemento por completo (para que no ocupe ningún espacio en el diseño), pero solo cuando el elemento es un elemento de tabla.

HTML:

<button  onClick="mostrar('imagen')" >Aceptar</button>

 <div id='imagen'></div>

Alternativa para capturar el evento Click del botón:

HTML BOTON:

<button id="btnShowImage">Aceptar</button>

JS:

let imgHidde = document.getElementById('imagen')
let btn = document.getElementById('btnShowImage')

btn.addEventListener('click', () => {
    imgHidde.innerHTML='<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIAYA8hTE0vOHlJm4y8DlUYvC9GTcKuJtwWze-7RtzNyb9SGi6JWnmeYgqAkHBVWflaDM&usqp=CAU">';      
})
0

Tendrías que usar el setTimeout() para que se oculte dicho elemento cada cierto tiempo, para ocultarlo le tendrías que agregar la propiedad display: none dentro del setTimeout(), sería algo así:

function mostrar(id) {
  img = document.getElementById(id);
  img.style.display = 'block';
  img.innerHTML = '<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRIAYA8hTE0vOHlJm4y8DlUYvC9GTcKuJtwWze-7RtzNyb9SGi6JWnmeYgqAkHBVWflaDM&usqp=CAU">';

  setTimeout(() => {
    img.style.display = 'none';
  }, 4000);
}
<button onclick="mostrar('imagen')" >Aceptar</button>
<div id='imagen'></div>

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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