Javascript 未知类型错误：无法读取属性"；搜索“；未定义的_Javascript_Html_Youtube_Youtube Api_Youtube Data Api

Javascript 未知类型错误：无法读取属性"；搜索“；未定义的

javascript html youtube youtube-api

Javascript 未知类型错误：无法读取属性"；搜索“；未定义的,javascript,html,youtube,youtube-api,youtube-data-api,Javascript,Html,Youtube,Youtube Api,Youtube Data Api,我正在尝试使用Youtube数据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

我正在尝试使用Youtube数据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新手，所以如果我犯了任何noobish错误，一定要让我知道

我将删除内联javascript并使用在

init

回调中创建的委托点击事件。问题可能是由于时间安排，此路线可避免该问题。另外，由于

的所有文本都是搜索词，因此您可以使用它来获取应该搜索的内容。因此：

<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);
  });
}

函数init（）{
gapi.client.setApiKey（“API密钥”）；
load（“youtube”，“v3”，function（））{
document.querySelector（“#youtube类别”）.addEventListener（'click'，函数（事件）{
//这是一个标记，获取文本并使用它进行搜索
如果（event.target.tagName=='LI'）{
var searchTerm=event.target.textContent.toLowerCase（）；
var request=gapi.client.youtube.search.list({
部分：'代码片段'，
键入：“视频”，
问：搜索术语
});
console.log（searchTerm）；
请求.执行（函数（响应）{
控制台日志（响应）；
});
}
}，假）；
});
}

Codepen示例：

您没有关闭

按钮

标签。另外，拥有

表单

元素对于您所做的工作来说是不必要的。您知道您需要一个客户端ID，并且首先要进行身份验证吗？@J.Titus我试图关闭按钮标签。不起作用。谢谢，伙计！工作得很有魅力！嘿，我尝试在li中放置一个按钮标记，并更改

event.target.tagName===“button”

，然后将

event.target.textContent.toLowerCase（）

更改为

event.target.value（）

，但没有效果。还有什么需要更改的吗？谢谢！没问题，我做到了。无论如何，谢谢！