脚本获取第一个结果并返回 VideoID。现在我的问题是当我按下提交按钮时搜索功能没-6ren">
gpt4 book ai didi

javascript - 无法读取未定义的属性 "search"

转载 作者:可可西里 更新时间:2023-11-01 14:50:28 25 4
gpt4 key购买 nike

我正在尝试制作一个使用 Youtube API 的脚本,我输入了一个关键字,youtube api 找到视频 -> 脚本获取第一个结果并返回 VideoID。现在我的问题是当我按下提交按钮时搜索功能没有被触发。有谁知道这可能是什么原因?这是代码;

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

最佳答案

我在 JS 中做了一些更改,并在 html 中添加了一个字段来显示视频 ID。

html文件:

<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>

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

关于javascript - 无法读取未定义的属性 "search",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20614965/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com