我一直在使用Punk API,我已经为brewdog制造的任何啤酒制作了搜索工具。我似乎无法解决的一个问题是,每当用户进行第二次搜索时,结果都只会显示在第一个搜索结果下方,然后会在其下显示第三个搜索结果,依此类推,最终会产生大量搜索结果。我知道需要做一个清除上一次搜索结果的函数,然后再将div返回新的搜索结果,但是我不知道我是否刚刚使事情复杂化。任何帮助将不胜感激。
html代码:
<div id="beerSearchDiv">
<h2>Beer Searcher</h2>
<input id="BeerInputSearch" type="text" value="" placeholder="Search..."></input>
<button id="BeerSearchBtn">Submit</button>
<h2 class="search-beer">Search Above For Any Brewdog Beer</h2>
<div id="search-result" ></div>
<div class="beer-component" style="display:none;" >
<div class="beer-title" ></div>
<div class="beer-tagline" ></div>
<div class="beer-abv" ></div>
<div class="beer-image"><img id="imageSearch" alt="beer" /></div>
<div class="beer-description" ></div>
<br>
</div>
</div>
document.getElementById("BeerSearchBtn").onclick = beerAsk;
randomBeertBtn.addEventListener("click", getData)
JavaScript代码:
function beerAsk(e) {
const resultContainer = document.getElementById("search-result");
const beerComponent = document.getElementsByClassName("beer-component")[0];
const beerage = document.getElementById("BeerInputSearch").value;
const url = api + beerage;
e.preventDefault()
fetch(url)
.then(reponse => {
return reponse.json()
})
.then(data => {
data.forEach((beer) => {
const theBeer = beer.name;
const theTagline = beer.tagline;
const theDescription = beer.description;
const theAbv = beer.abv;
const thePic = beer.image_url;
function imgDisplay() {
if (thePic === null) {
return document.getElementById('imageSearch').src = "https://images.punkapi.com/v2/keg.png";
} else {
return thePic;
}
}
let component = beerComponent.cloneNode(true);
let titleBeer = component.getElementsByClassName('beer-title')[0];
let taglineBeer = component.getElementsByClassName('beer-tagline')[0];
let abvBeer = component.getElementsByClassName('beer-abv')[0];
let descriptionBeer = component.getElementsByClassName('beer-description')[0];
let imgBeer = component.querySelector('.beer-image img');
component.style = "display: block;";
titleBeer.innerHTML += theBeer
taglineBeer.innerHTML += theTagline
abvBeer.innerHTML += "ABV: " + theAbv + "%"
descriptionBeer.innerHTML += theDescription
imgBeer.src = imgDisplay();
imgBeer.alt = theBeer;
resultContainer.appendChild(component);
})
})
}
答案 0 :(得分:-1)
您的代码中似乎没有什么可以清空resultContainer的HTML,而修改它的方式是使用append
(仅添加到其中)。
您可以执行自定义功能,但我认为最简单的方法是在您知道成功获取数据后(如在data.forEach((beer) => {
之前)添加一行以清除所述容器的HTML内容。
我不知道这行是否可行,仅作为示例
resultContainer.innerHTML = ""
应该可以很好地重置列表。
如果您需要更多逻辑,也可以做一个自定义函数来在此处调用以提高可读性,但我认为默认情况下不是必需的。