如何替换 UI 元素而不是仅仅将它们添加到现有的 UI。| JavaScript , 获取 API | Dom 操纵

Question

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

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

下面我会把JavaScript，还有一个link留给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

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;
}

如何替换 UI 元素而不是仅仅将它们添加到现有的 UI。| JavaScript , 获取 API | Dom 操纵

How to replace UI elements instead of just adding to them to the existing UI.| JavaScript , Fetch API | Dom Manipulation

html

javascript

dom

fetch

codepen