如何将提交点击事件连接到输入值以查询 api
document.addEventListener("click", function (event) {
// Checking if the button was clicked
if (!event.target.matches("#button")) return;
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Host': 'google-web-search.p.rapidapi.com',
'X-RapidAPI-Key': 'xxxxxxxxxxxxxxxxxxxxxxxxxx'
}
};
fetch('https://google-web-search.p.rapidapi.com/?query=Nike&gl=US&max=10' , options)
.then(response => response.json())
.then(response => rendersearch(response))
.catch(err => console.error(err));
});
function rendersearch(response) {
const setup = document.getElementById("setup");
setup.innerHTML = response.setup;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="sketch.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input id="input" type="text" name="name" value="">
<button id="button" type='button'>Submit</button>
</form>
<p id="setup"></p>
</body>
</html>我需要使用用户输入来查询 api 并将搜索结果显示在屏幕上。 我在将按钮单击事件与输入更改侦听器连接时遇到问题。请帮助
document.addEventListener("click", function (event) {
// Checking if the button was clicked
if (!event.target.matches("#button")) return;
};
fetch('https://google-web-search.p.rapidapi.com/?query=Nike&gl=US&max=10' , options)
.then(response => response.json())
.then(response => rendersearch(response))
.catch(err => console.error(err));
});
function rendersearch(response) {
const setup = document.getElementById("setup");
setup.innerHTML = response.setup;
}
我，当我尝试搜索时，我变得不确定，但在 console.log 中，它的提取正确，我不知道可能是什么问题
document.addEventListener("click", function (event) {
// Checking if the button was clicked
if (!event.target.matches("#button")) return;
const options = {
method: 'GET',
headers: {
'X-RapidAPI-Host': 'google-web-search.p.rapidapi.com',
'X-RapidAPI-Key': 'xxxxxxxxxxxxxxxxxxxxxxxxxx'
}
};
fetch('https://google-web-search.p.rapidapi.com/?query=Nike&gl=US&max=10' , options)
.then(response => response.json())
.then(response => rendersearch(response))
.catch(err => console.error(err));
});
function rendersearch(response) {
const setup = document.getElementById("setup");
setup.innerHTML = response.setup;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="sketch.js"></script>
<title>Document</title>
</head>
<body>
<form>
<input id="input" type="text" name="name" value="">
<button id="button" type='button'>Submit</button>
</form>
<p id="setup"></p>
</body>
</html>I need to use user input to query an api and get the search result displayed on the screen.
i'm having trouble connecting the button click event with the input change listener. kindly help
document.addEventListener("click", function (event) {
// Checking if the button was clicked
if (!event.target.matches("#button")) return;
};
fetch('https://google-web-search.p.rapidapi.com/?query=Nike&gl=US&max=10' , options)
.then(response => response.json())
.then(response => rendersearch(response))
.catch(err => console.error(err));
});
function rendersearch(response) {
const setup = document.getElementById("setup");
setup.innerHTML = response.setup;
}
i'm getting undefined when i try to search but in the console.log its fetching correctly i dont know what might be the problem
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
很可能
响应对象不包含名为设置的字段，也许您可以尝试更改
Very likely the
responseobject does not contain a field calledsetup, maybe you can try to changeto
to see what response you got in the console first, then pass the desired field to
rendersearch()您好，我遇到了类似的问题，这是我发现解决方案通知我如何将变量（按钮）分配给我希望用户单击（按钮），
然后而不是document.addeventlistener的东西。
变量，然后它可以解决您的问题只是不正确的AddeventListner函数语法
我使用了button.addeventlistener（您可以将按钮更改为分配给您想要单击的任何东西的 帮助
在此处输入图像描述
Hello I had a similar issue to you and this is what I found to be the solution notice how I assigned a variable (button) to the thing I wanted the user to click on (a button)
and then rather than document.addEventListener
I used button.addEventListener (you can change button to the variable assigned to whatever thing you wanted to be clicked and it should then work your issue is simply incorrect syntax for the addEventlistner function no other line of your code seems to be incorrect
I hope that helped
enter image description here
您有一个关闭标签
};to Mucht，事件侦听器在删除时应工作。我不知道API呼叫是否有效。You have a closing tag
};to mucht, the event listener should work if you delete it. I do not know if the API call is working corectly.