我有一个搜索表单,我想从中向API
发送呼叫。我知道我的功能正在运行,因为在提交时,我的控制台记录了日志。另外,在控制台中,如果我调用function search("mytermhere")
,则会从API返回响应,但无法从form事件中触发搜索功能。请帮助!
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<link href="https://fonts.googleapis.com/css?family=Liu+Jian+Mao+Cao|Raleway&display=swap" rel="stylesheet">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/solid.min.js">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Document</title>
</head>
<body>
<div class="background">
<div class="overlay">
<h1 class="title">
Visual Vibes
</h1>
<h2>search images</h2>
<form class="search-form" type="submit">
<input label="search" class="input" type="text" placeholder="" value="">
</form>
</div>
</div>
<script src=" script.js "></script>
</body>
</html>
JS:
const input = document.querySelector(".input");
let searchTerm = input.value;
const form = document.querySelector(".search-form");
function search(searchTerm) { //does not run when called by event listener
let url = `${URL}&query=${searchTerm}`;
return fetch(url)
.then(response => response.json())
.then(result => {
return result.results;
console.log(results.results);
});
}
input.addEventListener("focus", function(e) {
e.preventDefault();
console.log(input);
input.style = "font-family: 'Raleway', sans-serif";
input.placeholder = "";
});
input.addEventListener("blur", function(e) {
e.preventDefault();
console.log(input);
input.style = "font-family: FontAwesome";
input.value = "";
input.placeholder = "\uf002";
});
form.addEventListener(
"submit",
function(e) {
let searchTerm = input.value;
console.log(searchTerm); //outputs value in input in console
e.preventDefault();
console.log("hi"); //outputs in console when form submitted
search(searchTerm);
},
false
);
编辑:已更新为包含完整代码
您的问题在表单HTML代码之内。
表单标签没有“类型”属性。如果您要添加一个按钮来提交表单,请按照以下步骤操作:
<input type="submit" value="Submit" />
此外,据我所知,您的“ searchTerm”变量无效。没有“ input.value”。您需要为输入文本框同时添加一个“名称”属性或向其添加一个“ id”属性,以检索搜索词。
检索带有ID的搜索词:
document.getElementById("id").value;
使用名称检索搜索词:
document.nameOfForm.nameOfTextbox.value;
如果要使表单“无需按钮即可提交”,请将位置设置为“绝对”并将其隐藏在某处,如下所示:
<input type="submit" style="position: absolute; left: -9999px"/>