无法读取属性“搜索”的未定义 [英] Cannot read property "search" of undefined

问题描述

我试图制作一个使用YouTube API的脚本工作，我放入一个关键字，youtube api发现视频 - >脚本获取第一个结果并返回VideoID。现在我的问题是，当我按下我的提交按钮时，搜索功能不会触发。有谁知道这可能是什么原因？这是代码;

html

 < script src = assets / js / search.jstype =text / javascript>< / script> 
< script src =https://apis.google.com/js/client.js?onload=onClientLoadtype =text / javascript>< / script> 
< body> 
< center> 
< h3 class =h3> KJKerstborrel  -  Muziekrequest< / h3> 
< div class =input> 
< form name =muziekaction =succes / indexmethod =post> 
< input type =textclass =input-xlargeid =artiestname =artiestplaceholder =Gewenste artiest/>< br> 
< input type =textclass =input-xlargeid =nummername =nummerplaceholder =Gewenst nummerrequired />< br> 
< button style =width：200px; class =btn btn-successonClick =search（）type =button> Deze wil ik horen！< / button>< br> 
< / form> 
< / div> 
< / center> 
< / body> 
  

JS

  //您使用YouTube API必须符合服务条款：
 // https://developers.google.com/youtube/terms 
 var YT ='undefined'; 
 
 //辅助函数在HTML页面上显示JavaScript值。 
函数showResponse（响应）{
 YT =响应; 
 
 document.getElementById（'VideoURL'）。value = YT.items [0] .Id.VideoID; 
} 
 
 //加载JavaScript客户端库时自动调用。 
函数onClientLoad（）{
 gapi.client.load（'youtube'，'v3'，onYouTubeApiLoad）; 
 search（）; 
} 
 
 //在YouTube API接口加载时自动调用（请参见第9行）。 
函数onYouTubeApiLoad（）{
 //此API密钥仅供本课使用。 
 //请参阅http://goo.gl/PdPA1获取您自己的应用程序的密钥。 
 gapi.client.setApiKey（'AIzaSyD49-XZ2JV7Rws3KDM2T7nA56Jbi-O7djY'）; 
 
 
 function search（）{
 //使用JavaScript客户端库创建一个search.list（）API调用。 
 var request = gapi.client.youtube.search.list（{
 part：'id'，
q：document.getElementById（artiest）。value + - + document。 getElementById（nummer）。value，
}）; 
 
 //将请求发送到API服务器
 //并在响应中调用onSearchRepsonse（）。 
 request.execute（onSearchResponse）; 
} 
 
 //通过YouTube API请求的响应自动调用。 
 function onSearchResponse（response）{
 showResponse（response）; 
} 
  

解决方案

JS和我在html中添加了一个字段来显示视频ID。

html文件：

 < script src =search.jstype =text / javascript>< / script> 
< script src =https://apis.google.com/js/client.js?onload=onClientLoadtype =text / javascript>< / script> 
< body> 
< center> 
< h3 class =h3> KJKerstborrel  -  Muziekrequest< / h3> 
< div class =input> 
< form name =muziekaction =succes / indexmethod =post> 
< input type =textclass =input-xlargeid =artiestname =artiestplaceholder =Gewenste artiest/>< br> 
< input type =textclass =input-xlargeid =nummername =nummerplaceholder =Gewenst nummerrequired />< br> 
< button style =width：200px; class =btn btn-successonClick =search（）type =button> Deze wil ik horen！< / button>< br> 
< input type =textclass =input-xlargeid =VideoURLname =VideoURLplaceholder =VideoURL/>< br> 
< / form> 
< / div> 
< / center> 
< / body> 
  

JS文件：

  //您使用YouTube API必须符合服务条款：
 // https://developers.google.com/youtube/terms 
 var YT ='未定义; 
 
 //辅助函数在HTML页面上显示JavaScript值。 
函数showResponse（响应）{
 YT =响应; 
 //改变：namegiving 
 document.getElementById（'VideoURL'）。value = YT.items [0] .id.videoId; 
} 
 
 //加载JavaScript客户端库时自动调用。 
函数onClientLoad（）{
 gapi.client.load（'youtube'，'v3'，onYouTubeApiLoad）; 
 // search（）; //改变了。 
} 
 
 //在YouTube API接口加载时自动调用（请参见第9行）。 
函数onYouTubeApiLoad（）{
 //此API密钥仅供本课使用。 
 //请参阅http://goo.gl/PdPA1获取您自己的应用程序的密钥。 
 gapi.client.setApiKey（'AIzaSyD49-XZ2JV7Rws3KDM2T7nA56Jbi-O7djY'）; 
 
 
 function search（）{
 //使用JavaScript客户端库创建一个search.list（）API调用。 
 var qVar = document.getElementById（artiest）。value 
 + - 
 + document.getElementById（nummer）。value; 
 //已更改。添加：输入
 var request = gapi.client.youtube.search.list（{
类型：'video'，
部分：'id'，
q：qVar 
}）; 
 
 //将请求发送到API服务器
 //并在响应中调用onSearchRepsonse（）。 
 request.execute（onSearchResponse）; 
} 
 
 //通过YouTube API请求的响应自动调用。 
 function onSearchResponse（response）{
 showResponse（response）; 
} 
  

I'm trying to make a script work that uses theYoutube API, i put in a keyword, youtube api finds video -> script takes first result and returns VideoID. Now my problem is that the search function doesn't get triggerd when I press my submit button. Does anyone know what could be the cause of this? This is the code;

html

<script src="assets/js/search.js" type="text/javascript"></script>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
<body>
    <center>
    <h3 class="h3">KJKerstborrel - Muziekrequest</h3>
        <div class="input">
            <form name="muziek" action="succes/index" method="post">
                <input type="text" class="input-xlarge" id="artiest"  name="artiest" placeholder="Gewenste artiest" /><br>
                <input type="text" class="input-xlarge" id="nummer"  name="nummer" placeholder="Gewenst nummer" required/><br>
                <button style="width: 200px;" class="btn btn-success" onClick="search()" type="button">Deze wil ik horen!</button><br>
            </form>
        </div>
    </center>
</body>

JS

    // Your use of the YouTube API must comply with the Terms of Service:
// https://developers.google.com/youtube/terms
var YT = 'undefined';

// Helper function to display JavaScript value on HTML page.
function showResponse(response) {
    YT = response;

    document.getElementById('VideoURL').value = YT.items[0].Id.VideoID;
}

// Called automatically when JavaScript client library is loaded.
function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
    search();
}

// Called automatically when YouTube API interface is loaded (see line 9).
function onYouTubeApiLoad() {
    // This API key is intended for use only in this lesson.
    // See http://goo.gl/PdPA1 to get a key for your own applications.
    gapi.client.setApiKey('AIzaSyD49-XZ2JV7Rws3KDM2T7nA56Jbi-O7djY');
}

function search() {
    // Use the JavaScript client library to create a search.list() API call.
    var request = gapi.client.youtube.search.list({
        part: 'id',
        q: document.getElementById("artiest").value + " - " + document.getElementById("nummer").value,
    });

    // Send the request to the API server,
    // and invoke onSearchRepsonse() with the response.
    request.execute(onSearchResponse);
}

// Called automatically with the response of the YouTube API request.
function onSearchResponse(response) {
    showResponse(response);
}

解决方案

I made a few changes in the JS and i added a field in the html to display the video id.

The html file:

<script src="search.js" type="text/javascript"></script>
<script src="https://apis.google.com/js/client.js?onload=onClientLoad" type="text/javascript"></script>
<body>
    <center>
    <h3 class="h3">KJKerstborrel - Muziekrequest</h3>
        <div class="input">
            <form name="muziek" action="succes/index" method="post">
                <input type="text" class="input-xlarge" id="artiest"  name="artiest" placeholder="Gewenste artiest" /><br>
                <input type="text" class="input-xlarge" id="nummer"  name="nummer" placeholder="Gewenst nummer" required/><br>
                <button style="width: 200px;" class="btn btn-success" onClick="search()" type="button">Deze wil ik horen!</button><br>
                <input type="text" class="input-xlarge" id="VideoURL"  name="VideoURL" placeholder="VideoURL"/><br>
            </form>
        </div>
    </center>
</body>

The JS file:

// Your use of the YouTube API must comply with the Terms of Service:
// https://developers.google.com/youtube/terms
var YT = 'undefined';

// Helper function to display JavaScript value on HTML page.
function showResponse(response) {
    YT = response;
    // changed: namegiving
    document.getElementById('VideoURL').value = YT.items[0].id.videoId;
}

// Called automatically when JavaScript client library is loaded.
function onClientLoad() {
    gapi.client.load('youtube', 'v3', onYouTubeApiLoad);
    //search();    // changed.
}

// Called automatically when YouTube API interface is loaded (see line 9).
function onYouTubeApiLoad() {
    // This API key is intended for use only in this lesson.
    // See http://goo.gl/PdPA1 to get a key for your own applications.
    gapi.client.setApiKey('AIzaSyD49-XZ2JV7Rws3KDM2T7nA56Jbi-O7djY');
}

function search() {
    // Use the JavaScript client library to create a search.list() API call.
    var qVar = document.getElementById("artiest").value
             + " - "
             + document.getElementById("nummer").value;
    // changed. added: type
    var request = gapi.client.youtube.search.list({
        type: 'video',
        part: 'id',
        q: qVar
    });

    // Send the request to the API server,
    // and invoke onSearchRepsonse() with the response.
    request.execute(onSearchResponse);
}

// Called automatically with the response of the YouTube API request.
function onSearchResponse(response) {
    showResponse(response);
}

这篇关于无法读取属性“搜索”的未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！