fetch api 不恢复搜索值

Question

大家好，似乎没有人能够指导我解决我遇到的获取问题。

我正在使用 google api 建立一个图书馆，但问题是，如果我搜索“Harry”（使用 Harry 进行解释）它确实会显示一些书，但是如果我再次搜索让我说“Potter”，那么两个搜索请求都会堆积起来，我只需要清除第一个搜索结果，然后显示第二个搜索结果，而不是我正在填写搜索书籍模板并且对如何解决这个问题

first search

second search

哈巴狗：

extends ./index.pug
block contentt
  #categContainer
    h3 Elige a continuación unas de las categorias para poder filtrar tu busqueda adecuadamente
    ul#categories 
      button.btn.btn-autor.btn-outline-info.categories(
        type="button",
        onclick="agregarAutor()"
      ) Autor
      button.btn.btn-libro.btn-outline-info.categories(
        type="button",
        onclick="agregarLibro()"
      ) Libros
      button.btn.btn-revista.btn-outline-info.categories(
        type="button",
        onclick="agregarCategoria()"
      ) Categoria
      button.btn.btn-titulo.btn-outline-info.categories(
        type="button",
        onclick="agregarTitulo()"
      ) titulo
      button.btn.btn-editorial.btn-outline-info.categories(
        type="button",
        onclick="agregarEditorial() "
      ) Casa editora
      button.btn.btn-gratis.btn-outline-info.categories(
        type="button",
        onclick="agregarFree()"
      ) Libros gratuitos
      button.btn.btn-pagas.btn-outline-info.categories(
        type="button",
        onclick="agregarPaid()"
      ) Libros pagos
  div
    label(for="category_type")
    input.input(type="text", name="category_type")
    button.btn.btn-outline-primary.choice(onclick="restartItems()") Elige tu categoria
  #category_reveil

JS

var acumulado = [];
var input_el = document.querySelector(".input");
valor = input_el;
valor.innerHTML = "";
var autorcito = document.querySelector(".btn-autor");
var librito = document.querySelector(".btn-libro");
var revistica = document.querySelector(".btn-revista");
var titulacho = document.querySelector(".btn-titulo");
var editoriale = document.querySelector(".btn-editorial");
var free = document.querySelector(".btn-gratis");
var paid = document.querySelector(".btn-pagas");
function agregarAutor() {
  acumulado.push("Autor");
  console.log(acumulado);
  autorcito.disabled = true;
}
function agregarLibro() {
  acumulado.push("Libro");
  console.log(acumulado);
  librito.disabled = true;
}
function agregarCategoria() {
  acumulado.push("Categoria");
  console.log(acumulado);
  revistica.disabled = true;
}
function agregarTitulo() {
  acumulado.push("Titulo");
  console.log(acumulado);
  titulacho.disabled = true;
}
function agregarEditorial() {
  acumulado.push("Editorial");
  console.log(acumulado);
  editoriale.disabled = true;
}
function agregarFree() {
  acumulado.push("Gratis");
  console.log(acumulado);
  free.disabled = true;
}
function agregarPaid() {
  acumulado.push("Pagos");
  console.log(acumulado);
  paid.disabled = true;
}
function restartItems() {
  autorcito.disabled = false;
  librito.disabled = false;
  revistica.disabled = false;
  titulacho.disabled = false;
  editoriale.disabled = false;
  free.disabled = false;
  paid.disabled = false;
  acumulado = [];
  console.log(acumulado);
  fetch(`https://www.googleapis.com/books/v1/volumes?q=${valor}`)
    .then((data) => {
      return data.json();
    })
    .then((response) => {
      for (var i = 0; i < response.items.length; i++) {
        var item = response.items[i].volumeInfo.title;
        var new_item_list = document.createElement("a");
        var new_item = document.createElement("div").appendChild(new_item_list);
        new_item.classList.add("div_categ_style");
        var item = response.items[i];
        document
          .querySelector("#category_reveil")
          .appendChild(new_item).innerHTML += "<br>" + item.volumeInfo.title;
      }
    });
}

Answer 1

i just need the first search to flush out and the second search result to show up instead I am filling up the SEARCH BOOKS TEMPLATE

没有清空内容的地方...所以它肯定会堆积起来。我还稍微清理了有关元素创建的逻辑。请参阅代码中的注释。

fetch(`https://www.googleapis.com/books/v1/volumes?q=${valor}`)
  .then((data) => {
    return data.json();
  })
  .then((response) => {
    
    // Get #category_reveil
    let category_reveil = document.querySelector("#category_reveil")
        
    // Clear #category_reveil
    category_reveil.innerHTML = ""
    
    // Process the response
    response.items.forEach(item => {
      
      // Create the anchor and its text
      let a = document.createElement("a");
      a.innerText = item.volumeInfo.title;
      
      // Create the div and its class
      let div = document.createElement("div");
      div.classList.add("div_categ_style");
      
      // Append a to div
      div.appendChild(a)
      
      // Append div to #category_reveil
      category_reveil.appendChild(div)
    }
  });

fetch api 不恢复搜索值

fetch api not reinstating search values

html

javascript

fetch

pug