javascript - 如何替换 UI 元素，而不是仅仅将它们添加到现有 UI。| JavaScript , 获取 API | DOM 操作

Question

所以我有一个小项目，我目前正在学习 API 以及如何使用它们。我的项目可让您搜索和显示电视节目中的角色。数据来自 API。我能够从 API 获取数据没有问题，我可以在我的 UI 中显示它们。但是如果我尝试对第二个字符进行第二次搜索，则第一个字符的数据不会被替换，新数据只是添加到第一个字符下（我知道这可能会造成混淆，抱歉我无法解释好点）。我昨天问了一些粗鲁的回答，所以我试图改写我的答案。

基本上我的问题是：当您进行多次搜索时，“旧”字符的信息会继续显示，并且最近的搜索数据只是附加到页面底部。

下面我将留下 JavaScript，以及 codepen 的链接。任何帮助表示赞赏，这已经踢了我几天了，哈哈。

// UI Elements
const name = document.getElementById("name");
const lastLocation = document.getElementById("location");
const status = document.getElementById("status");
const submit = document.getElementById("submit");
const charArea = document.getElementById("charArea");
const search = document.getElementById("search");

// Get the data from the api
async function getCharacter(character) {
  const characterResponse = await fetch(
    `https://rickandmortyapi.com/api/character/?name=${character}`
  );
  // characterInfo will now contain all our data
  const characterInfo = await characterResponse.json();
  const charArr = characterInfo.results;

  charArr.forEach(function (character) {
    displayCharacters(character);
  });

  return characterInfo;
}

// Add event listener
submit.addEventListener("click", function (e) {
  charArea.innerHTML = "";
  let name = search.value;
  getCharacter(name);
  e.preventDefault();
});

let output = "";
function displayCharacters(character) {
  output += `
  <div class="card mt-3 text-center">
        <img src="${character.image}" alt="..." class="card-img-top" />
        <div class="card-body">
          <h5 class="card-title">${character.name}</h5>
          <p class="card-text" id="status">${character.status}</p>
          <p class="card-text" id="location">${character.location.name}</p>
        </div>
      </div>
    `;

  charArea.innerHTML = output;
}

代码笔： https ://codepen.io/bmac3032/pen/KKVJdgq

标签： javascripthtmldomfetchcodepen

Answer 1

下面的代码工作正常。displayCharacters 中使用的输出变量在全局范围内。所以它保留了之前搜索的值。

    // UI Elements
const name = document.getElementById("name");
const lastLocation = document.getElementById("location");
const status = document.getElementById("status");
const submit = document.getElementById("submit");
const charArea = document.getElementById("charArea");
const search = document.getElementById("search");

// Get the data from the api
async function getCharacter(character) {
  const characterResponse = await fetch(
    `https://rickandmortyapi.com/api/character/?name=${character}`
  );
  // characterInfo will now contain all our data
  const characterInfo = await characterResponse.json();
  displayCharacters(characterInfo.results);
  return characterInfo;
}

// Add event listener
submit.addEventListener("click", function (e) {
  charArea.innerHTML = "";
  let name = search.value;
  getCharacter(name);
  e.preventDefault();
});

function displayCharacters(charArr) {
  let output = "";
  charArr.forEach(function (character) {
   output += `<div class="card mt-3 text-center">
        <img src="${character.image}" alt="..." class="card-img-top" />
        <div class="card-body">
          <h5 class="card-title">${character.name}</h5>
          <p class="card-text" id="status">${character.status}</p>
          <p class="card-text" id="location">${character.location.name}</p>
        </div>
      </div>
    `;
  });
  charArea.innerHTML = output;
}