Estoy usando la API de Giphy para aprender a hacer un generador de GIF aleatorio. El siguiente código funciona bien para generar un GIF y ponerlo en imageContainer, pero me pregunto qué puedo agregar para que aparezca un nuevo GIF en imageContainer cuando el botón randomDog se hace clic? Como se ve ahora, la solicitud de más GIF es exitosa si hace clic en el botón, pero no se publican en el contenedor de imágenes ya que ya tiene un GIF.

Este es mi JavaScript:

document.addEventListener('DOMContentLoaded', function () {

request = new XMLHttpRequest;
request.open('GET', 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cute+dog', true);

document.getElementById("randomDog").onclick = function () {
    if (request.status >= 200 && request.status < 400){
        data = JSON.parse(request.responseText).data.image_url;
        console.log(data);
        document.getElementById("imageContainer").innerHTML = '<center><img src = "'+data+'"  title="GIF via Giphy"></center>';
    } else {
        console.log('reached giphy, but API returned an error');
     }
};

request.onerror = function() {
    console.log('connection error');
};

request.send();
});

Y este es mi HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel= "stylesheet" type="text/css" href="dogstyle.css">
    <meta charset="UTF-8">
    <title>Sadness be gone!</title>
</head>

<body>

    <div id="headers">
        <h1> Having a bad day?</h1>
        <h1> Not anymore! </h1>
    </div>

    <h3 id="subheader">Happiness and fluffyness is just a click away</h3>

    <div id="imageContainer"></div>

    <button id="randomDog" class="button">Click away!</button>

    <script src="js/experiment.js"></script>

</body>

¡Gracias de antemano!

0
JumpyWizard 9 mar. 2017 a las 12:53

2 respuestas

La mejor respuesta

Simplemente mueva las líneas inicializando y enviando el XMLHttpRequest dentro del controlador click e incluya la función de éxito dentro de un controlador de eventos onreadystatechange.

(Tenga en cuenta que la clave API que está utilizando me devuelve un error cuando la uso en un fragmento; no estoy seguro de cómo solucionaría eso, pero tal vez funcione en su extremo).

document.addEventListener('DOMContentLoaded', function() {

  document.getElementById("randomDog").onclick = function() {
    request = new XMLHttpRequest;
    request.open('GET', 'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cute+dog', true);
    request.onreadystatechange = function() {
      if (request.readyState === 4) {
        if (request.status >= 200 && request.status < 400) {
          data = JSON.parse(request.responseText).data.image_url;
          console.log(data);
          document.getElementById("imageContainer").innerHTML = '<center><img src = "' + data + '"  title="GIF via Giphy"></center>';
        } else {
          console.log('reached giphy, but API returned an error');
        }
      }
    }
    request.onerror = function() {
      console.log('connection error');
    };

    request.send();
  };

});
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="dogstyle.css">
  <meta charset="UTF-8">

  <title>Sadness be gone!</title>
</head>

<body>

  <div id="headers">
    <h1> Having a bad day?</h1>
    <h1> Not anymore! </h1>
  </div>

  <h3 id="subheader">Happiness and fluffyness is just a click away</h3>

  <div id="imageContainer"></div>

  <button id="randomDog" class="button">Click away!</button>

  <script src="js/experiment.js"></script>

</body>
0
gyre 9 mar. 2017 a las 09:57

Prueba esto

....    
document.getElementById("randomDog").onclick = function () {
        if (request.status >= 200 && request.status < 400){
            data = JSON.parse(request.responseText).data.image_url;
            console.log(data);
            // Clear the existing image first
            document.getElementById("imageContainer").removeChild(document.getElementsByClassName("mygif")[0]);
            // Now set the new image in image container
            document.getElementById("imageContainer").innerHTML = '<center><img class="mygif" src = "'+data+'"  title="GIF via Giphy"></center>';
        } else {
            console.log('reached giphy, but API returned an error');
         }
    };
....
0
Sunny Tambi 9 mar. 2017 a las 10:03