我正在构建一个使用Giphy API的web搜索引擎。。。但我遇到的问题是按钮功能。我被构建了一个按钮来更改页面的格式以及显示多少搜索。。。。网站运行得很好，但按钮不起作用我尝试了内联代码和链接文件，但没有起作用这是星期一到期的，我已经为此工作了一周…请帮助！我不知道我做错了什么。。。
以下是一些代码。。。
enter code here
function () {
function giphySearchEngine(keyword, limit) {
return fetch(`http://api.giphy.com/v1/gifs/search?q=${keyword}&api_key=h5nEbFf0nz3FmKUhFMFajDQpM6ew66XF&limit=${limit}`)
.then(response => response.json());
}
//h5nEbFf0nz3FmKUhFMFajDQpM6ew66XF// apikey
//https://api.giphy.com/v1/gifs/search?api_key=h5nEbFf0nz3FmKUhFMFajDQpM6ew66XF&q=&limit=18&offset=0&rating=G&lang=en
function images (img) {
let $div = $('<div class="row"></div>');
$('<div class="col"></div>').append(img).appendTo($div);
$('#show').append($div)
}
function resultLoad(img) {
return new Promise((resolve, reject) => {
img.onload = resolve;
});
}
//search field text box
(function listenOnFormSubmit() {
$('#searchForm').submit(async (ev) => {
ev.preventDefault();
let $input = $('#searchInput');
main($input.val());
});
})
();
async function main(keyword) {
const result = await giphySearchEngine(keyword);
$('#show').html('');
let promises = [];
result.data.forEach(gif => {
let img = new Image();
img.src = gif.images.original.url;
promises.push(resultLoad(img));
images (img);
});
//Gif limit buttons
$('#btn6').on('click', function() {
console.log('Get me 6 results!');
giphySearchEngine(keyword, 6);
});
$('#btn12').on('click', function() {
console.log('Get me 12 results!');
giphySearchEngine(keyword, 12);
});
$('#btn18').on('click', function() {
console.log('Get me 18 results!');
giphySearchEngine(keyword, 18);
});
}
})();/* font */
body{
font-family:
'Bangers', cursive;
color:#393e46;
}
/* color layout */
.background{
color:#f7f7f7;
}
div.input-group {
width: auto;
}
/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
.col {
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.col {
flex: 100%;
max-width: 100%;
}
}
footer {
display: block;
position: fixed;
left: 0;
bottom: 0;
width: 100%;
background-color: #EEEEEE;
color: #393e46;
text-align: right;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<!-- meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" type ="text/css" href="https://colorhunt.co/palette/130807">
<link rel="stylesheet"type="text/css" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
<title>Giphy Web search engine</title>
<style>
/* css for grid */
* {
box-sizing: border-box;
}
.header {
text-align: center;
padding: 32px;
}
.row {
display: flex;
-ms-flex-wrap: wrap; /* IE 10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create two equal columns that sits next to each other */
.col {
flex: 50%;
padding: 0 4px;
}
.col img{
margin-top: 8px;
vertical-align: middle;
}
/* Style the buttons */
.btn-group {
display: block; text-align: right;
}
.btn-group.btn{
float: none;
}
.btn {
border: none;
outline: none;
padding: 10px 16px;
background-color: #f7f7f7;
cursor: pointer;
font-size: 18px;
}
.btn:hover {
background-color: #ddd;
}
.btn.active {
background-color: #666;
color: white;
}
</style>
</head>
<body>
<h1><img src ="images/PoweredBy_100px_Badge.gif"alt="" width="75" height="75" >Giphy</h1>
<div class="header" id="myHeader">
<h1>Giphy Image Changer</h1>
<p>Click on the buttons to change the giphy view.</p>
<button class="btn" onclick="one()">1</button>
<button class="btn" onclick="two()">2</button>
<button class="btn active" onclick="four()">4</button>
</div>
<div class="container">
<form id="searchForm">
<div class="input-group mb-3 mx-md-3">
<input type="text" onfocus="this.value=''" class="form-control" id='searchInput'placeholder="Enter Gif Search" aria-label="Enter Search" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-secondary" type="button" id="button-addon2"><svg class="bi bi-search" width="1em" height="1em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M10.442 10.442a1 1 0 011.415 0l3.85 3.85a1 1 0 01-1.414 1.415l-3.85-3.85a1 1 0 010-1.415z" clip-rule="evenodd"/>
<path fill-rule="evenodd" d="M6.5 12a5.5 5.5 0 100-11 5.5 5.5 0 000 11zM13 6.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z" clip-rule="evenodd"/>
</svg></button>
</div>
</div>
</form>
<div class="btn-group mr-3 mx-md-3" role="group" aria-label="Second group">
<button type="button" id ='btn6' class="btn">6</button>
<button type="button" id ='btn12' class="btn">12</button>
<button type="button" id ='btn18' class="btn">18</button>
</div>
<div id ="show" class="row">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
<footer>
<div class="d-flex bd-highlight">
<div class="p-2 flex-grow-1 bd-highlight">Copyrights: Jose Rodriguez®</div>
<div class="p-2 bd-highlight">Contact info: j.rodriguez48@yahoo.com</div>
<div class="p-2 bd-highlight"><img src="images/PoweredBy_200px-White_HorizText.png"></div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.0.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script type = "text/javascript" src="js/demo.js"></script>
<!-- Optional JavaScript -->
<script>
// Get the elements with class="col"
let elements = document.getElementsByClassName("col");
// Declare a loop variable
let i;
// Full-width images
function one() {
for (i = 0; i < elements.length; i++) {
elements[i].style.flex = "100%";
console.log(one);
}
}
// Two images side by side
function two() {
for (i = 0; i < elements.length; i++) {
elements[i].style.flex = "50%";
}
}
// Four images side by side
function four() {
for (i = 0; i < elements.length; i++) {
elements[i].style.flex = "25%";
}
}
// Add active class to the current button (highlight it)
let header = document.getElementById("myHeader");
let btns = header.getElementsByClassName("btn");
for (let i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
let current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
</script>
</body>
</html>编辑：您当前的实施没有读取结果
$('#btn6').on('click', async function() {
console.log('Get me 6 results!');
const newResults = await giphySearchEngine(keyword, 6);
// Do nothing with new results.
});
您只解决了第一个搜索承诺。您需要解析每个搜索请求并循环查看结果。
尝试将其封装在一个函数中
async function main(keyword) {
async function search(keyword) {
const result = await giphySearchEngine(keyword);
$('#show').html('');
let promises = [];
result.data.forEach(gif => {
let img = new Image();
img.src = gif.images.original.url;
promises.push(resultLoad(img));
images (img);
});
}
}