gpt4 book ai didi

javascript - 未知的TypeError:无法读取未定义的属性 “search”

转载 作者:行者123 更新时间:2023-12-03 06:20:52 32 4
gpt4 key购买 nike

我正在尝试使用Youtube Data API v3进行基本的搜索操作,当我单击任意按钮时,会将字符串传递给searchyoutube函数,我希望该字符串成为搜索查询。

这是名为app.js的JS:

"use strict";
var query;
function searchyoutube (query){

var request = gapi.client.youtube.search.list({
part: 'snippet',
type: 'video',
q: query
});
console.log(query);

request.execute(function(response){
console.log("Whatever");
});
}

function init()
{
gapi.client.setApiKey("API KEY");
gapi.client.load("youtube","v3",function(){
//api ready
});
}

这是HTML
<html>
<head>
<link rel="stylesheet" type="text/css" href="yy.css">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
<title>Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="https://apis.google.com/js/client.js?onload=init"></script>
</head>

<body>

<h3>Header</h3>
<h5>Random Header</h5>

<form method="post">
<ul class="youtube-categories" id="youtube-category">
<li><button onClick ="searchyoutube('music')">Music</li>
<li><button onClick ="searchyoutube('sports')">Sports</li>
<li><button onClick ="searchyoutube('gaming')">Gaming</li>
<li><button onClick ="searchyoutube('movies')">Movies</li>
<li><button onClick ="searchyoutube('tv shows')">TV Shows</li>
<li><button onClick ="searchyoutube('news')">News</li>
<li><button onClick ="searchyoutube('live')">Live</li>
</ul>
</form>
</div>

</body>
</html>

我是JS的新手,所以如果我犯了任何讨厌的错误,请告诉我!

最佳答案

我将删除嵌入式javascript并使用在init回调中创建的委派click事件。该问题很可能是由于时间问题所致,此路线可避免该问题。另外,由于<li>的所有文本都是搜索词,因此您可以使用该词来获取应搜索的内容。所以:

<ul class="youtube-categories" id="youtube-category">
<li>Music</li>
<li>Sports</li>
<li>Gaming</li>
<li>Movies</li>
<li>TV Shows</li>
<li>News</li>
<li>Live</li>
</ul>

并更新了javascript:
function init() {
gapi.client.setApiKey("API KEY");
gapi.client.load("youtube","v3",function(){
document.querySelector('#youtube-category').addEventListener('click', function(event) {
// it's an <li> tag, get the text and search with it
if(event.target.tagName === 'LI') {
var searchTerm = event.target.textContent.toLowerCase();
var request = gapi.client.youtube.search.list({
part: 'snippet',
type: 'video',
q: searchTerm
});
console.log(searchTerm);

request.execute(function(response){
console.log(response);
});
}
}, false);
});
}

Codepen示例: http://jsbin.com/bezawasuta/edit?html,js,output

关于javascript - 未知的TypeError:无法读取未定义的属性 “search”,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35383147/

32 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com