javascript - 谁能帮我让搜索栏正常工作，因为我现在有 JS 提示符？

Question

关闭。此题需要 details or clarity 。目前不接受答案。

---

想要改进这个问题吗？通过 editing this post 添加详细信息并澄清问题.

已关闭 8 年前。

Improve this question

我创建了一个从 YouTube API 中提取的小程序，它允许您在出现提示时搜索随机视频，查找您输入的任何标题。我的目标是让它像搜索引擎一样工作。我想让我的搜索栏作为输入而不是警报提示窗口。同样，当您在 jsbin 中使用 javascript 运行程序时，我也想让“查找”按钮充当提示警报窗口上的“确定”按钮。有人可以指出我完成此任务的正确方向吗？ Here是jsbin 。我假设我可以对按钮使用某种 OnClick 函数，但不完全确定如何实现它以及我将调用它。谢谢!

PS。我确信您已经知道这一点，但以防万一...请确保您在 jsbin 中运行该程序。与“用 JS 运行”。

Answer 1

您只需向查找按钮添加一个 onclick 监听器，并在有人单击时触发代码。您可以获取搜索输入的值而不是提示:

Javascript:

function search()
{
    var api_key; 
    api_key = "AIzaSyDiUEkwoldcB9qgRreOsaiyu2Nlj8U-03c";

    var search_term = document.getElementById("searchterm").value;

    function onSuccess(data){
        console.log(data);
        var obj = data.id;
        console.log (data.items[0].id.videoId);

        video_url = 'http://www.youtube.com/embed/' + data.items[0].id.videoId     +'?autoplay=1'; 
        video.src = video_url;
    }

    var youtube_url = 'https://www.googleapis.com/youtube/v3/search?part=id&q=' +search_term +'&maxResults=1&key=' +api_key;

    var video_url = 'http://www.youtube.com/embed/' +"IQ1_acLEVVo"+'?autoplay=1'; 


    $.ajax({
      method:'GET',
      url: youtube_url,
      success: onSuccess
    });

}

HTML:

<button type="button" id="search" onclick="search()">Find</button>

jsbin