如何用新内容onclick替换图像容器中的内容？

我使用Giphy的API来学习如何制作一个随机的GIF生成器。下面的代码工作正常，生成一个GIF并将其放入imageContainer，但我想知道我可以添加什么，以便在单击randomDog按钮时在imageContainer中显示新的GIF？现在看起来，如果您点击按钮，请求更多GIF成功，但它们不会发布到图像容器中，因为它已经有一个GIF。如何用新内容onclick替换图像容器中的内容？

这是我的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(); 
});

这是我的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>

提前感谢！

来源

2017-03-09 JumpyWizard

刚刚转会请求到onclick处理 – paqash

这岂不是更简单给图像标签的'ID' ，目标'ID'并改变'src'？ 'document.getElementById（“ImageID”）.src = data' – NewToJS

只需移动click处理程序中的行初始化并发送XMLHttpRequest，并将成功函数包含在onreadystatechange事件处理程序中。

（请注意，您使用的返回一个错误，我的API密钥，当我使用它的一个片段;不确定我将如何解决这个问题，但也许它会在你结束工作。）

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>

来源

2017-03-09 09:57:10 gyre

非常感谢！ :) – JumpyWizard

试试这个

....  
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'); 
     } 
    }; 
....

来源

2017-03-09 10:03:52

谢谢你的帮助！ ^^ – JumpyWizard

如果我的答案解决了您的查询，您能将其标记为“答案”吗？ –

如何用新内容onclick替换图像容器中的内容？

回答

相关问题