Как очистить содержимое нажатия кнопки после каждого щелчка и создать новый

Question

Я провел много исследований и, похоже, не могу найти ответа, или мои условия поиска не подходят.

Я создаю приложение, которое использует API для получения и отображения данных внутри тела HTML, созданного с использованием метода document.createElement. У меня есть текстовое поле и кнопка формы, которая при вводе текста и нажатии кнопки извлекает данные и встраивает их в HTML.

Это было хорошо на одном этапе, когда я вводил текст и нажимал кнопку несколько раз, содержимое 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>

Answer 1

В этом случае вы повторно используете слишком много кода. Попробуйте это

Я переместил форму за пределы контейнера и опустошил контейнер, если это контейнер заклинаний

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>