OnClick show gif

Question

OnClick show gif

Navigation

#1 by (0 votes)

0

document.addEventListener('DOMContentLoaded', function () {
    var clickTimes = 0;
    var inicialImage = document.getElementById('inicial');
    var loadingImage = document.getElementById('pensando');
    var ideaImage = document.getElementById('idea');
    var finalImage = document.getElementById('final');
    var btnRandomWord = document.getElementById('randomWordGen');
    var wordOutput = document.getElementById('wordOutput');
    var ocultarCarga = document.getElementById('ocultar_mientras_carga');
    var contenedorWord = document.getElementById('wordOutput');
    var contenedor_formulario = document.getElementById('contenedor_formulario');
    
    
    if(clickTimes == 0){
        ideaImage.classList.remove('visible');
        inicialImage.classList.add('visible');
        ocultarCarga.classList.add('visible');
        contenedorWord.classList.remove('visible');

    }

  btnRandomWord.addEventListener('click', function () {
    if (clickTimes < 3) {
        ocultarCarga.remove('visible'); // elimina la clase CSS 'visible'
        inicialImage.remove('visible'); // elimina la clase CSS 'visible'
        loadingImage.classList.add('visible'); // agrega la clase CSS 'visible'
        
        ideaImage.classList.remove('visible'); // elimina la clase CSS 'visible'
        btnRandomWord.classList.add('invisible'); //elimina boton generar palabra
        contenedorWord.classList.add('visible');
 

      var request = new XMLHttpRequest();
      // método HTTP y URL
      request.open('GET', 'php/randomwordgen.php?clickTimes='+clickTimes);
      request.onload = function () {
        // estado 4 = petición completada y respuesta recibida
        if (request.readyState === 4) {
          // código HTTP 200 = petición exitosa
          if (request.status === 200) {
            // se define un timeout de 2.5 segundos (ms)
            window.setTimeout(function () {
                btnRandomWord.classList.remove('invisible'); //muestra el boton generar palabra
                loadingImage.classList.remove('visible');
                ideaImage.classList.add('visible');
                contenedor_formulario.classList.add('visible');
                
                wordOutput.textContent = request.responseText;
                clickTimes++;
            }, 1000);
          }
        }
      };
      request.send(); // se envía la petición
    } else {
        loadingImage.classList.add('visible');
        ideaImage.classList.remove('visible');
            window.setTimeout(function () {
                
                loadingImage.classList.remove('visible');
                 
                wordOutput.textContent = 'MEJOR REGALALE UN MINI';
                finalImage.classList.add('visible'); // añade la clase CSS 'visible'
            }, 1000);
               
               
                btnRandomWord.classList.add('invisible');
    }
  });
});

I want to make a code with js that when I press a button I change an image that there is by a gif and that the whole gif is shown. Can someone help me generate the code? the one I have does not work the way I want it to work.

document.addEventListener('DOMContentLoaded', function () {
    var clickTimes = 0;
    var inicialImage = document.getElementById('inicial');
    var loadingImage = document.getElementById('pensando');
    var ideaImage = document.getElementById('idea');
    var finalImage = document.getElementById('final');
    var btnRandomWord = document.getElementById('randomWordGen');
    var wordOutput = document.getElementById('wordOutput');
    var ocultarCarga = document.getElementById('ocultar_mientras_carga');
    var contenedorWord = document.getElementById('wordOutput');
    var contenedor_formulario = document.getElementById('contenedor_formulario');
    
    
    if(clickTimes == 0){
        ideaImage.classList.remove('visible');
        inicialImage.classList.add('visible');
        ocultarCarga.classList.add('visible');
        contenedorWord.classList.remove('visible');

    }

  btnRandomWord.addEventListener('click', function () {
    if (clickTimes < 3) {
        ocultarCarga.remove('visible'); // elimina la clase CSS 'visible'
        inicialImage.remove('visible'); // elimina la clase CSS 'visible'
        loadingImage.classList.add('visible'); // agrega la clase CSS 'visible'
        
        ideaImage.classList.remove('visible'); // elimina la clase CSS 'visible'
        btnRandomWord.classList.add('invisible'); //elimina boton generar palabra
        contenedorWord.classList.add('visible');
 

            window.setTimeout(function () {
                btnRandomWord.classList.remove('invisible'); //muestra el boton generar palabra
                loadingImage.classList.remove('visible');
                ideaImage.classList.add('visible');
                contenedor_formulario.classList.add('visible');
                
      
             
            }, 5000);
          
    
     
   
    } else {
        loadingImage.classList.add('visible');
        ideaImage.classList.remove('visible');
            window.setTimeout(function () {
                
                loadingImage.classList.remove('visible');
                 
                wordOutput.textContent = 'MEJOR REGALALE UN MINI';
                finalImage.classList.add('visible'); // añade la clase CSS 'visible'
            }, 1000);
               
               
                btnRandomWord.classList.add('invisible');
    }
  });
});

            <div id="final">
                <img src="images/mini_auto.png" alt="final" title="final"/><br>
               Nuevo mini
            </div>

            <div id="inicial">
                <img src="images/icono_generar_simple.png" alt="inicial" title="inicial"/><br>
                
            </div><br>

            <div id="idea">
                <img src="images/robot_idea.png" alt="idea" title="idea"/><br>
               
            </div>

            <div id="pensando">

                <img src="css/images/gif_prueba01.gif" alt="pensando" title="Cocinando"/><br>
               
            </div>
<br>

            <div class="word">
            <span id="wordOutput" class="ocultar_idea_cuando_carga">
            </span>
            <br><button id="randomWordGen">GENERAR IDEA</button><br>
                
            </div>

javascript html

asked by Antonio Ángel Estrada Pérez 06.02.2017 в 18:24

source

1 answer

Echo in MVC ASP Extract groups from an XML file with XPath?

score 0 · Answer 1

What you want, in principle is easy, you just have to change the SRC of the image. I'll give you an example to see if this is what you need:

function cambiarImagen() {
  var element = document.getElementById("myImg");
  element.src="http://lh4.ggpht.com/-0tWRHtmY0AA/Thck9FS0GuI/AAAAAAAAB4k/Nm0HcGz7vq0/gifsrisasjajaja19_thumb2.gif";
}

<div><button onclick="cambiarImagen()">cambiar imagen</button></div>
<div><img src="http://www.imagenesderisa.com.mx/wp-content/uploads/2015/10/imagenes-graciosas-4.jpg" id="myImg"></div>

I hope it serves you.