我一直在研究 gif API，几乎所有的东西都整理好了，但我想添加一个小按钮功能。当您在搜索栏中输入“猫”或其他内容时，应在搜索栏下方添加一个具有该名称的按钮，并将其保存到本地存储中。
这是当前代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Search Gif</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="mystyle.css"/>
</head>
<body>
<header>
<div class="container">
<h6>Gif Search</h6>
<nav>
<ul class="navbar-nav">
<li class="nav-item">
<div class="modal fade" id="window" aria-labelledby="window">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<button class="btn-close" data-bs-dismiss="modal"></button>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
</li>
</ul>
</nav>
</div>
</div>
</header>
<section class="input--field d-flex justify-content-center align-items-center">
<div class="input-group input--container">
<input class="form-control" type="text" placeholder="search gif" id="input" autocomplete="off"/>
<span class="input-group-text" id="input--icon">
<button type="submit">Search</button>
</span>
</div>
</section>
<main>
<section class="mt-5">
<div class="container">
<div class="row gif--field"></div>
</div>
</section>
</main>
<div class="container">
<hr/>
</div>
<script type="text/javascript" src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
</body>
</html>
document.querySelector('#input').addEventListener('keyup', searchGif);
document.querySelector('#input--icon').addEventListener('click', searchGif);
async function searchGif (event) {
if(input.value != '' && event.code === 'NumpadEnter' || event.code === 'Enter' || event.type === 'click') {
let input = document.querySelector('#input');
document.querySelector('.gif--field').innerHTML = '<div class="col-md mt-4">Loading...</div>';
let req = await fetch(`https://tenor.googleapis.com/v2/search?q=${input.value}&key=AIzaSyD0Gtagyi2BUKkJ-pwVD8irjgHq3kABbcQ&limit=8`);
let reqJson = await req.json();
console.log(reqJson);
mountGifs(reqJson);
function mountGifs(list) {
let html = '';
for(let i = 0; i < list.results.length; i++) {
html +=
`<div class="col-md-4 d-flex justify-content-center align-items-center">
<div class="p-2">
<img class="img-fluid img-thumbnail" src="${list.results[i].media_formats.tinygif.url}" />
</div>
</div>`;
}
document.querySelector('.gif--field').innerHTML = html;
}
}
function addButton()
let newButton = document.createElement("button");
{ if(input.value != '')
newButton.type = "button";
newButton.textContent = '';
newButton.className = "btn btn-secondary";
buttonsDiv.appendChild(newButton);
}
function reloadButtons()
{
if(localStorage.getItem("buttons") != null)
{
let oldButtons = localStorage.getItem("buttons").split(",");
for(i = 0; i < oldButtons.length; i++)
{
addButton(oldButtons[i]);
}
}
}
}