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

问题描述：

我正在尝试使用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，如果我所做的任何noobish错误不要让我知道！

你不闭上你的'button'标签。另外，拥有'form'元素对于你正在做的事情来说不是必需的。 –

你知道你需要一个客户端ID，并首先进行身份验证？ – adeneo

@ J.Titus我尝试关闭按钮标签。不工作。 –

答

我将删除嵌入式JavaScript并使用在init回调中创建的委托单击事件。这个问题很可能是由于时机，这条路线可以避免这个问题。此外，由于所有<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

谢谢队友！像魅力一样工作！ –

嘿，我试着把里面的按钮标签，并更改'event.target.tagName ==='BUTTON''，然后更改'event.target.textContent.toLowerCase（）'到'event.target.value ）'，但没有工作。还有什么我需要改变。谢谢！ –

没问题，我做了。谢谢！ –

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

相关推荐