未知類型錯誤：無法讀取未定義的屬性「搜索」

我正在嘗試使用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錯誤不要讓我知道！

來源

2016-02-13 Rahul Padalkar

你不閉上你的'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

來源

2016-02-13 17:55:35

謝謝隊友！像魅力一樣工作！ –

嘿，我試着把裏面的按鈕標籤，並更改'event.target.tagName ==='BUTTON''，然後更改'event.target.textContent.toLowerCase（）'到'event.target.value ）'，但沒有工作。還有什麼我需要改變。謝謝！ –

沒問題，我做了。謝謝！ –

未知類型錯誤：無法讀取未定義的屬性「搜索」

回答

相關問題