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

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

javascript html

Javascript 如何用新内容onclick替换图像容器中的内容？,javascript,html,Javascript,Html,我正在使用Giphy的API来学习如何制作随机GIF生成器。下面的代码可以很好地生成一个GIF并将其放入imageContainer，但我想知道当单击randomDog按钮时，我可以添加什么使新的GIF显示在imageContainer中？现在看来，如果您单击该按钮，请求更多GIF是成功的，但它们不会发布在图像容器中，因为其中已经有GIF 这是我的JavaScript： document.addEventListener('DOMContentLoaded', function () { re

我正在使用Giphy的API来学习如何制作随机GIF生成器。下面的代码可以很好地生成一个GIF并将其放入

imageContainer

，但我想知道当单击

randomDog

按钮时，我可以添加什么使新的GIF显示在

imageContainer

中？现在看来，如果您单击该按钮，请求更多GIF是成功的，但它们不会发布在图像容器中，因为其中已经有GIF

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

document.addEventListener（'DOMContentLoaded'，函数（）{
请求=新的XMLHttpRequest；
request.open（'GET'，'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cute+狗（真的）；
document.getElementById（“randomDog”）.onclick=function（）{
如果（request.status>=200&&request.status<400）{
data=JSON.parse（request.responseText）.data.image\uURL；
控制台日志（数据）；
document.getElementById（“imageContainer”）.innerHTML=''；
}否则{
log（'已到达giphy，但API返回错误'）；
}
};
request.onerror=函数（）{
log（“连接错误”）；
};
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>


悲伤消失了！
今天过得不好吗？
不再是了！
幸福和蓬松只需轻轻一按就可以了
点击离开！

提前谢谢

只需将初始化和发送

XMLHttpRequest

的行移动到

click

处理程序中，并在

onreadystatechange

事件处理程序中包含success函数

（请注意，当我在代码段中使用API键时，您正在使用的API键会为我返回一个错误；我不确定如何修复该错误，但它可能会在您的端工作。）

document.addEventListener（'DOMContentLoaded'，function（）{
document.getElementById（“randomDog”）.onclick=function（）{
请求=新的XMLHttpRequest；
request.open（'GET'，'http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=cute+狗（真的）；
request.onreadystatechange=函数（）{
if（request.readyState==4）{
如果（request.status>=200&&request.status<400）{
data=JSON.parse（request.responseText）.data.image\uURL；
控制台日志（数据）；
document.getElementById（“imageContainer”）.innerHTML=''；
}否则{
log（'已到达giphy，但API返回错误'）；
}
}
}
request.onerror=函数（）{
log（“连接错误”）；
};
request.send（）；
};
});

悲伤消失了！
今天过得不好吗？
不再是了！
幸福和蓬松只需轻轻一按就可以了
点击离开！
试试这个
....    
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');
         }
    };
....

。。。。
document.getElementById（“randomDog”）.onclick=function（）{
如果（request.status>=200&&request.status<400）{
data=JSON.parse（request.responseText）.data.image\uURL；
控制台日志（数据）；
//首先清除现有图像
document.getElementById（“imageContainer”）.removeChild（document.getElementsByClassName（“mygif”）[0]）；
//现在在图像容器中设置新图像
document.getElementById（“imageContainer”）.innerHTML=''；
}否则{
log（'已到达giphy，但API返回错误'）；
}
};
....
只需将请求移动到onclick handler中，给图像标签一个ID
，以ID
为目标，并更改src
会不会简单得多document.getElementById（“ImageID”）.src=data
感谢您的帮助^^如果我的答案解决了你的问题，你能把它标记为“答案”吗？