我是 Javascript 的初學者。我正在關注 Youtube 上的 Clever Programmer 教程。生成 gif 的原因是因為我正在使用這個 API。
在教程中看到的是，當您單擊生成時，他會生成一些隨機的貓圖片。
我在那部分已經成功了，但他沒有為生成的圖片制作洗掉按鈕。所以這就是我試圖做的。成功生成影像后，我單擊了“洗掉”按鈕，它們被洗掉了，這很好，所以我嘗試生成更多影像，但之后我無法生成任何影像。我現在可以生成新影像的唯一方法是重繪 頁面并點擊生成按鈕。
function generateCat(){
var image=document.createElement('img');
var div=document.getElementById('flex-cat-gen');
image.src="https://thecatapi.com/api/images/get?format=src&type=gif&size=small";
div.appendChild(image);
}
function removeCat(){
document.getElementById('flex-cat-gen').remove();
}<div class="container-2">
<h2>Challenge 2: Cat Generator</h2>
<button class="btn btn-success" id="cat-generator" onclick="generateCat()">Generate Cat</button>
<div class="flex-box-container-2" id="flex-cat-gen">
</div>
<div>
<button class="btn btn-danger" id="cat-remover" onclick="removeCat()">Remove Cat</button>
</div><
</div>uj5u.com熱心網友回復：
只需在代碼下方為影像提供一個 ID
function generateCat(){
var image=document.createElement('img');
image.setAttribute("id","myCatImage");
var div=document.getElementById('flex-cat-gen');
image.src="https://thecatapi.com/api/images/get?format=src&type=gif&size=small";
div.appendChild(image);
}
function removeCat(){
var img=document.getElementById('myCatImage').remove();
}<div class="container-2">
<h2>Challenge 2: Cat Generator</h2>
<button class="btn btn-success" id="cat-generator" onclick="generateCat()">Generate Cat</button>
<div class="flex-box-container-2" id="flex-cat-gen">
</div>
<div>
<button class="btn btn-danger" id="cat-remover" onclick="removeCat()">Remove Cat</button>
</div><
</div>uj5u.com熱心網友回復：
當你從 dom 中洗掉元素時，你并沒有洗掉 img，而是洗掉了父 div，所以下次當你嘗試將 img 添加到flex-cat-genid 的 div 時，它會失敗，因為它已經洗掉了！
解決方案：
生成 img 時將 id 添加到 img 元素。在洗掉函式上，通過 id 獲取 img 元素，然后洗掉 img
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/517104.html