(index):19 Uncaught ReferenceError: Search is not defined at HTMLInputElement.onkeyup

问题描述

我正在使用 Marvel 的 api 制作一个应用程序，在这个应用程序中我试图放置一个搜索栏，但我没有得到它。

每次我尝试在此 api 中搜索名称时，函数 Search() 在 html 中都未定义。

我不明白该函数如何未在 html 中定义。

我该怎么做才能改变这种情况？

const timeStamp = "1622146184";
const privateKey = "somekey";
const publicKey = "someotherkey";
const md5 = "b34f17bceca201652c24e9aa21777da9";
const Hero = document.querySelector('article');
const input = document.getElementById('myInput');
 fetch(`http://gateway.marvel.com/v1/public/characters?ts=${timeStamp}&apikey=${publicKey}&hash=${md5}&limit=6`).then((response)=> {
    return response.json();
 }).then((jsonParsed)=>{
     jsonParsed.data.results.forEach(element => {
         const srcImage = element.thumbnail.path + '.' +  element.thumbnail.extension;
         const nameHero = element.name;
         createHero(srcImage,nameHero,Hero);
  },function Search() {
    // Declare variables
    const filter = input.value.toupperCase();
    const textName2 = nameHero;
    // Loop through all textName2st items,and hide those who don't match the search query
    for (i = 0; i <= textName2.length; i++) {
    const p = textName2[i].getElementsByTagName("p")[0];
      txtValue = p.textContent || p.innerText;
      if (txtValue.toupperCase().indexOf(filter) > -1) {
        textName2[i].style.display = "";
      } else {
        textName2[i].style.display = "none";
      }
    } 
    })
    console.log(jsonParsed);
 })
function createHero(srcImage,divToAppend){
    const divPai = document.createElement('section');
    const textName = document.createElement('p');
    const img = document.createElement('img');

    textName.textContent = nameHero;
    img.src= srcImage;
    divPai.appendChild(img);
    divPai.appendChild(textName);
    divToAppend.appendChild(divPai);

    divPai.classList.add("personagem");
}

<main>
    <input type="text" id="myInput" onkeyup="Search()" placeholder="Search for names.." />
    <article id="herois"></article>
</main>

解决方法

search 函数为 undefined，因为 fetch 未正确关闭。我还猜测您只想在用户实际输入一些搜索查询时发出请求。我没有看到多个 article 元素，所以我真的不知道该怎么做。但请注意，在这种情况下，您不妨使用 getElementById。如果有多篇文章具有相同的 id，则它将不起作用。

const timeStamp = "1622146184";
const privateKey = "somekey";
const publicKey = "someotherkey";
const md5 = "b34f17bceca201652c24e9aa21777da9";
const Hero = document.getElementById('herois');
const input = document.getElementById('myInput');
 
  
 async function Search() {
    console.log(input.value);
    await fetch(`http://gateway.marvel.com/v1/public/characters?ts=${timeStamp}&apikey=${publicKey}&hash=${md5}&limit=6`)
    .then( response => {
      return response.json();
   })
   .then(jsonParsed => {
      console.log(jsonParsed);
      jsonParsed.data.results.forEach(element => {
        const srcImage = element.thumbnail.path + '.' +  element.thumbnail.extension;
        const nameHero = element.name;
        createHero(srcImage,nameHero,Hero);
      });
    });
    // Declare variables
    const filter = input.value.toUpperCase();
    const textName2 = nameHero;
    // Loop through all textName2st items,and hide those who don't match the search query
    for (i = 0; i <= textName2.length; i++) {
      const p = textName2[i].getElementsByTagName("p")[0];
      txtValue = p.textContent || p.innerText;
      
      if (txtValue.toUpperCase().indexOf(filter) > -1) {
        textName2[i].style.display = "";
      } else {
        textName2[i].style.display = "none";
      }
    } 
}
 
function createHero(srcImage,divToAppend){
    const divPai = document.createElement('section');
    const textName = document.createElement('p');
    const img = document.createElement('img');

    textName.textContent = nameHero;
    img.src= srcImage;
    divPai.appendChild(img);
    divPai.appendChild(textName);
    divToAppend.appendChild(divPai);

    divPai.classList.add("personagem");
}

<main>
    <input type="text" id="myInput" onchange="Search()" placeholder="Search for names.." />
    <article id="herois"></article>
</main>