Javascript 试图在html页面上使用youtube api_Javascript_Html_Api_Youtube_Youtube Api

Javascript 试图在html页面上使用youtube api

javascript html api youtube youtube-api

Javascript 试图在html页面上使用youtube api,javascript,html,api,youtube,youtube-api,Javascript,Html,Api,Youtube,Youtube Api,这是我的密码： <!DOCTYPE html> <html lang="en" > <head> <script type="text/javascript"> function showResponse(response){ var responseString = JSON.stringify(response, '', 2); document.getElementById('response').

这是我的密码：

<!DOCTYPE html>

<html lang="en" >
<head>
<script type="text/javascript">

    function showResponse(response){
        var responseString = JSON.stringify(response, '', 2);
        document.getElementById('response').innerHTML += responseString;
    }

    function onClientLoad(){
        gapi.client.load('youtube','v3', onYouTubeApiLoad);
    }

    function onYouTubeApiLoad(){
        gapi.client.setApiKey('MyActualKey');

        search();
    }

    function search(){
        var request = gapi.client.youtube.search.list({
            part: 'snippet'
        });

        request.execute(onSearchResponse);
    }

    function onSearchResponse(response){
        showResponse(response);
    }

</script>
<title></title>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>
</head>
<body>
    <div id="response"></div>
</body>
</html>


函数showResponse（响应）{
var responseString=JSON.stringify（response'，2）；
document.getElementById（'response'）.innerHTML+=responseString；
}
函数onClientLoad（）{
load（'youtube'，'v3'，onYouTubeApiLoad）；
}
函数onYouTubeApiLoad（）{
gapi.client.setApiKey（'MyActualKey'）；
搜索（）；
}
函数搜索（）{
var request=gapi.client.youtube.search.list({
部分：“代码片段”
});
请求。执行（onSearchResponse）；
}
函数onSearchResponse（响应）{
showResponse（应答）；
}

这段代码来自Codecademy，我想我可以在html页面上使用它，它会工作的。我从google获得了一个API密钥，并在google开发者控制台中将我的Youtube数据API v3设置设置为enabled，但这段代码给了我一个空白页面。

我做错了什么？

有一些缺失的片段，codecademy可能认为这些片段是理所当然的，但在将它们放在应用程序之外的您自己的服务器上时，这些片段是必不可少的。首先，您需要一行代码从google实际加载gapi库。您可以在结束前将其放入代码中：

<script src="https://apis.google.com/js/client.js?onload=onClientLoad"></script>

为此：

gapi.client.setApiKey('{WHATEVER_YOUR_ACTUAL_KEY IS');

最后，正如评论者所提到的，您的主体是空的，因此当您的代码执行showResponse方法时，没有地方可以放置返回的内容。添加以下内容：

<div id="response"></div>

因为你的身体里什么都没有？你需要在你的身体里包含代码，否则它将什么都不会显示直到不起作用，我实际上有钥匙并把它放在了正确的地方我只是不想在这里显示，我只是缺少脚本和div，但出于某种原因它仍然不起作用。我更新了代码的外观。

<div id="response"></div>