如何在单击按钮时刷新图像

Question

我正在学习 JS 入门课程，我们正在使用 API 来创建网页。用户应该从下拉菜单中选择一个选项，单击按钮，然后信息和图片就会填充到屏幕上。

我每次点击都会刷新信息，但我只是无法刷新图片。他们只是在不断地进行下一个。我可能正在寻找某种类型的循环？帮助刷新图片。如果有必要，我可以显示更多代码，我只是认为这两个函数是有问题的函数。

代码片段

window.onload = () => {
  fetchBreeds();
  const button = document.querySelector("#breed-info");
  button.onclick = loadBreed;
}

async function fetchBreeds() {
  const url = 'https://api.thecatapi.com/v1/breeds';
  const config = {
    method: "get",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": "live_gHifVtVU8weFvDiTnTAvfVvZKWSozJItlzcCfXiftr6dxCdjyHrAtj7d3z0hQ1PT"
    }
  }
  const response = await fetch(url, config);
  const data = await response.json();

  breedName(data);

}

async function loadBreed() {
  const breeds = document.querySelector("#breeds");
  const url =
    `https://api.thecatapi.com/v1/breeds/${breeds.value}`;
  const config = {
    method: "get",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": "live_gHifVtVU8weFvDiTnTAvfVvZKWSozJItlzcCfXiftr6dxCdjyHrAtj7d3z0hQ1PT"
    }
  }
  const response = await fetch(url, config);
  const data = await response.json();
  breedInfo(data);
  loadImages(data);
}

async function loadImages() {
  const breeds = document.querySelector("#breeds");
  const url = `https://api.thecatapi.com/v1/images/search?limit=10&breed_ids=${breeds.value}`;
  const config = {
    method: "get",
    mode: "cors",
    headers: {
      "Content-Type": "application/json",
      "x-api-key": "live_gHifVtVU8weFvDiTnTAvfVvZKWSozJItlzcCfXiftr6dxCdjyHrAtj7d3z0hQ1PT"
    }
  }
  const response = await fetch(url, config);
  const data = await response.json();
  showCat(data);
}

function showCat(data) {
  const catArea = document.querySelector("#bottom");
  for (let catRecord of data) {
    const image = document.createElement("img");
    image.src = catRecord.url;
    catArea.appendChild(image);

  }
  catArea.removeChild(image);
}

function breedName(data) {
  const breeds = document.querySelector("#breeds");
  for (let list of data) {
    const catName = list.name;
    let catID = list.id;
    //console.log(catID);
    breeds.innerHTML += `<option value = "${catID}">${catName}</option`;
  }
}

function breedInfo(data) {
  const name = data.name;
  const describe = data.description;
  const origin = data.origin;
  const lifeSpan = data.life_span;
  let kidFriendly = data.child_friendly;
  let dogFriendly = data.dog_friendly;
  let energy = data.energy_level;
  let social = data.social_needs;
  const learn = data.wikipedia_url;

  if (kidFriendly == 1) {
    kidFriendly = "very unfriendly (1)";
  } else if (kidFriendly == 2) {
    kidFriendly = "unfriendly (2)"
  } else if (kidFriendly == 3) {
    kidFriendly = "indifferent (3)"
  } else if (kidFriendly == 4) {
    kidFriendly = "friendly (4)"
  } else if (kidFriendly == 5) {
    kidFriendly = "very friendly (5)"
  }


  if (dogFriendly == 1) {
    dogFriendly = "very unfriendly (1)";
  } else if (dogFriendly == 2) {
    dogFriendly = "unfriendly (2)"
  } else if (dogFriendly == 3) {
    dogFriendly = "indifferent (3)"
  } else if (dogFriendly == 4) {
    dogFriendly = "friendly (4)"
  } else if (dogFriendly == 5) {
    dogFriendly = "very friendly (5)"
  }

  if (energy == 1) {
    energy = "like a slot (1)";
  } else if (energy == 2) {
    energy = "slow moving(2)"
  } else if (energy == 3) {
    energy = "energetic (3)"
  } else if (energy == 4) {
    energy = "a ball of energy (4)"
  } else if (energy == 5) {
    energy = "bouncing of the walls (5)"
  }

  if (social == 1) {
    social = "antisocial (1)";
  } else if (social == 2) {
    social = "a loner (2)"
  } else if (social == 3) {
    social = "indifferent (3)"
  } else if (social == 4) {
    social = "needs friends (4)"
  } else if (social == 5) {
    social = "very needy (5)"
  }


  document.querySelector("#name").innerHTML = `<span id="name">${name}</span>`;
  document.querySelector("#description").innerHTML = `<span id="description">${describe}</span>`;
  document.querySelector("#origin").innerHTML = `<span id="origin">${origin}</span>`;
  document.querySelector("#life-span").innerHTML = `<span id="life-span">${lifeSpan} years</span>`;
  document.querySelector("#child-friendly").innerHTML = `<span id="child-friendly">${kidFriendly}</span>`;
  document.querySelector("#dog-friendly").innerHTML = `<span id="dog-friendly">${dogFriendly}</span>`;
  document.querySelector("#energy-level").innerHTML = `<span id="energy-level">${energy}</span>`;
  document.querySelector("#social-needs").innerHTML = `<span id="social-needs">${social}</span>`;
  document.querySelector("#wiki").innerHTML = `<a id="wiki" href="${learn}">${learn}</a>`;
}

<section id="left">
  <h1>Breeds</h1>

  <select id="breeds">

  </select>

  <button id="breed-info">Explore cat breed!</button>
</section>

<section id="right">
  <p><label>Name:</label> <span id="name"></span></p>
  <p><label>Description:</label> <span id="description"></span></p>
  <p><label>Origin:</label> <span id="origin"></span></p>
  <p><label>Life span:</label> <span id="life-span"></span></p>
  <p><label>Child friendly:</label> <span id="child-friendly"></span></p>
  <p><label>Dog friendly:</label> <span id="dog-friendly"></span></p>
  <p><label>Energy level:</label> <span id="energy-level"></span></p>
  <p><label>Social needs:</label> <span id="social-needs"></span></p>
  <p><label>Learn more:</label>
    <a id="wiki" href="#"></a>
  </p>
</section>

<section id="bottom">

</section>

Answer 1

当您调用

showCat

时，您只需不断附加子项：

const catArea = document.querySelector("#bottom");
for (let catRecord of data) {
    const image = document.createElement("img");
    image.src = catRecord.url;
    catArea.appendChild(image);

} 

听起来你只需要先清除catArea - 你可以这样做

catArea.innerHTML = ''

，或者你可以使用

catArea.replaceChildren

，例如：

const catArea = document.querySelector("#bottom");
const images = data.map(catRecord => {
    const image = document.createElement("img");
    image.src = catRecord.url;
    return image;
})
catArea.replaceChildren.apply(catArea, images);

可运行示例（使用文本）：

    const data = [{url: 'C'}, {url: 'D'}]
    const catArea = document.querySelector("#bottom");
    const replacements = data.map(catRecord => {
        const image = document.createElement("span");
        image.innerHTML = catRecord.url;
        return image;
    });
    catArea.replaceChildren.apply(catArea, replacements)

<div id="bottom"><span>A</span><span>B</span></div>