时间戳

首页 > 解决方案 > 如何在每次点击后清除按钮点击的内容并生成新的

javascript - 如何在每次点击后清除按钮点击的内容并生成新的

问题描述

我做了很多研究，似乎找不到答案，或者我的搜索词不好。

我正在构建一个应用程序，该应用程序在使用方法生成的主体API内获取和显示数据。我有一个文本框和表单按钮，当输入文本并单击按钮时，它会检索数据并将其构建到.HTMLdocument.createElementHTML

这在一个阶段进展顺利，当我输入文本并多次单击按钮时，HTML每次都会替换内容。但是现在当我输入文本并多次单击按钮HTML时，每次生成并且每个HTML内容显示在彼此下方，而不是清除当前HTML并重新生成它。

如果有人可以请看我的代码，看看我哪里出错了，我们将不胜感激。

JSFiddle：https ://jsfiddle.net/4d01Lo85/ 。（在文本框中使用“Accio”和/或“Apparate”作为示例）

const spells = 'https://www.potterapi.com/v1/spells/?key=$2a$10$ETe09n075yUIX1L.Rd0Yx.lkB9svshYSg76BhZxIjrfrvp9/my5YG';
const spellBtn = document.querySelector('.spell-btn');
const spellTextBox = document.querySelector('#spell-text');
let spellContainer = document.querySelector('.spell-container');

function getJson(url, callback) {
  const xhr = new XMLHttpRequest;
  xhr.open('GET', url);
  xhr.onload = () => {
    if (xhr.status === 200) {
      let data = JSON.parse(xhr.responseText);
      return callback(data);
    }
  };
  xhr.send();
}

function createElements(type, parent, elementClass, elementID) {
  let element = document.createElement(type);
  parent.appendChild(element);
  element.className = elementClass;
  element.id = elementID;
  return element;
}

function generateSpellBody(data) {
  let spellBody = createElements('div', spellContainer, 'spell-cast', 'spell-cast');
  let spanclass = '';
  let error = 'Sorry, this is not a spell, or try again.';
  let spellName = '';
  let spellEffect = '';
  let spellType = '';

  for (let i = 0; i < data.length; i++) {
    if (data[i].spell === spellTextBox.value) {
      spellName = data[i].spell;
      spellEffect = `Type: ${data[i].effect}`;
      spellType = `Effect: ${data[i].type}`;
      spanclass += spellType;
      error = '';
      break;
    }
  }

  if (spellName === spellTextBox.value) {
    let spellRes = createElements('p', spellBody, spanclass.toLowerCase(), 'spell-res');
    let spellTypeDiv = createElements('p', spellBody, spanclass.toLowerCase(), 'spell-type');
    let spellEffPar = createElements('p', spellBody, spanclass.toLowerCase(), 'spell-info');
    spellRes.innerHTML = spellName;
    spellTypeDiv.innerHTML = spellType;
    spellEffPar.innerHTML = spellEffect;
  }

  let errorMsg = createElements('h3', spellBody, 'spell-error-message', 'error');
  errorMsg.innerHTML = error;
}

spellBtn.addEventListener('click', (e) => {
  e.preventDefault();

  let numbers = /^([^0-9]*)$/;
  let filledIn = true;

  if (!filledIn) {
    return;
  }
  if (!spellTextBox.value.match(numbers)) {
    filledIn = false;
  }
  if (!filledIn) {
    console.log('number alert');
  } else {
    getJson(spells, generateSpellBody);
  }
});
<div class="col-md-12 col-sm-12 spell-container">
  <form method='get'>
    <div class="form-group">
      <input type="text" class="form-control" id="spell-text" aria-describedby="emailHelp" placeholder="Enter spell">
    </div>
    <button type="submit" class="spell-btn btn btn-default btn-light">Do spell</button>
  </form>
</div>

标签： javascripthtml

解决方案

在这种情况下，您重用了太多代码。尝试这个

我将表单移到容器外并清空容器（如果它是拼写容器）

const spells = 'https://www.potterapi.com/v1/spells/?key=$2a$10$ETe09n075yUIX1L.Rd0Yx.lkB9svshYSg76BhZxIjrfrvp9/my5YG';
const spellBtn = document.querySelector('.spell-btn');
const spellTextBox = document.querySelector('#spell-text');
let spellContainer = document.querySelector('.spell-container');

function getJson(url, callback) {
  const xhr = new XMLHttpRequest;
  xhr.open('GET', url);
  xhr.onload = () => {
    if (xhr.status === 200) {
      let data = JSON.parse(xhr.responseText);
      return callback(data);
    }
  };
  xhr.send();
}

function createElements(type, parent, elementClass, elementID) {
  if (parent === spellContainer) parent.innerHTML="";
  let element = document.createElement(type);
  parent.appendChild(element);
  element.className = elementClass;
  element.id = elementID;
  return element;
}

function generateSpellBody(data) {
  let spellBody = createElements('div', spellContainer, 'spell-cast', 'spell-cast');
  let spanclass = '';
  let error = 'Sorry, this is not a spell, or try again.';
  let spellName = '';
  let spellEffect = '';
  let spellType = '';

  for (let i = 0; i < data.length; i++) {
    if (data[i].spell === spellTextBox.value) {
      spellName = data[i].spell;
      spellEffect = `Type: ${data[i].effect}`;
      spellType = `Effect: ${data[i].type}`;
      spanclass += spellType;
      error = '';
      break;
    }
  }

  if (spellName === spellTextBox.value) {
    let spellRes = createElements('p', spellBody, spanclass.toLowerCase(), 'spell-res');
    let spellTypeDiv = createElements('p', spellBody, spanclass.toLowerCase(), 'spell-type');
    let spellEffPar = createElements('p', spellBody, spanclass.toLowerCase(), 'spell-info');
    spellRes.innerHTML = spellName;
    spellTypeDiv.innerHTML = spellType;
    spellEffPar.innerHTML = spellEffect;
  }

  let errorMsg = createElements('h3', spellBody, 'spell-error-message', 'error');
  errorMsg.innerHTML = error;
}

spellBtn.addEventListener('click', (e) => {
  e.preventDefault();

  let numbers = /^([^0-9]*)$/;
  let filledIn = true;

  if (!filledIn) {
    return;
  }
  if (!spellTextBox.value.match(numbers)) {
    filledIn = false;
  }
  if (!filledIn) {
    console.log('number alert');
  } else {
    getJson(spells, generateSpellBody);
  }
});
  <form method='get'>
    <div class="form-group">
      <input type="text" class="form-control" id="spell-text" aria-describedby="emailHelp" placeholder="Enter spell">
    </div>
    <button type="submit" class="spell-btn btn btn-default btn-light">Do spell</button>
  </form>

<div class="col-md-12 col-sm-12 spell-container">
</div>

推荐阅读