-1

我正在使用 JS、JQuery、Bootstrap 和 HTML 编写应用程序。该应用程序的目标是对用户输入的关键字进行 YouTube 搜索，并向控制台返回 JSON 响应，提供有关搜索中出现的视频的详细信息。

我正在学习本教程，在本教程的这一点上，我应该能够在控制台中看到运行代码时的 JSON 响应。但是，当我在 Firefox 上运行代码时，出现以下错误：

解析“-webkit-text-size-adjust”值时出错。声明被放弃。_reboot.scss:28:2 未知的伪类或伪元素“焦点可见”。由于选择器错误，规则集被忽略。bootstrap.css:66 未知的伪类或伪元素“-ms-expand”。由于选择器错误，规则集被忽略。_forms.scss:7 未知的伪类或伪元素“-ms-input-placeholder”。由于选择器错误，规则集被忽略。_forms.scss:7 未知的伪类或伪元素“-ms-input-placeholder”。由于选择器错误，规则集被忽略。_forms.scss:7 未知的伪类或伪元素“-ms-value”。由于选择器错误，规则集被忽略。_forms.scss:71 未知的伪类或伪元素“-ms-value”。由于选择器错误，规则集被忽略。_custom-forms.scss:220 未知的伪类或伪元素“-ms-expand”。由于选择器错误，规则集被忽略。_custom-forms.scss:220 未知的伪类或伪元素“-ms-thumb”。由于选择器错误，规则集被忽略。_custom-forms.scss:382 由于选择器错误，规则集被忽略。_custom-forms.scss:382 未知的伪类或伪元素“-ms-thumb”。由于选择器错误，规则集被忽略。_custom-forms.scss:382 未知的伪类或伪元素“-ms-thumb”。由于选择器错误，规则集被忽略。_custom-forms.scss:382 未知的伪类或伪元素“-ms-thumb”。由于选择器错误，规则集被忽略。_custom-forms.scss:382 未知的伪类或伪元素“-ms-track”。由于选择器错误，规则集被忽略。_custom-forms.scss:382 未知的伪类或伪元素“-ms-fill-lower”。由于选择器错误，规则集被忽略。_custom-forms.scss:382 未知的伪类或伪元素“-ms-fill-upper”。由于选择器错误，规则集被忽略。_custom-forms.scss:382 未知的伪类或伪元素“-ms-thumb”。由于选择器错误，规则集被忽略。_custom-forms.scss:382 未知属性“孤儿”。声明被放弃。_card.scss:252:4 未知属性“寡妇”。声明被放弃。_card.scss:243 未知属性“孤儿”。声明被放弃。_print.scss:76:6 未知属性“寡妇”。声明被放弃。_print.scss:79:4 未知属性“大小”。声明被放弃。_reboot.scss:46 6 未知财产“寡妇”。声明被放弃。_print.scss:79:4 未知属性“大小”。声明被放弃。_reboot.scss:46 6 未知财产“寡妇”。声明被放弃。_print.scss:79:4 未知属性“大小”。声明被放弃。_reboot.scss:46

当我在 Chromium 上运行它时，我没有收到任何错误，也没有控制台输出。

这是我的代码：

$(document).ready(function(){

    var API_KEY = "AIzaSyCzpZZP564ykVqpun38mS0AbtR0cHoEYE0";

    $("#form").submit(function(event){

        event.preventDefault()

        alert("submitted")

        var search = $("#search").val()

        videoSearch(API_KEY,search,10)
    })

    function videoSearch(key,search,maxResults){

        $.get("https://www.googleapis.com/youtube/v3/search?key=" + key
            + "&type=video&part=snippet&maxResults=" + maxResults + "&q=" 
            + search, function(data){
                console.log(data)
            })
    }
})
<!DOCTYPE html>
<html>
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
    <meta content="utf-8" http-equiv="encoding">
    <title>YouTube Video Search</title>
    <link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <form>
            <div class="form-group">
                <input type="text" class="form-control" id="search">
                
            </div>
            <div class="form-group">
                <input type="submit" class="btn btn-danger" value="Search">
                
            </div>
            
        </form id="form">
    </div>
    <div class="row">
        <div class="col-md-12">
            <div id="videos">

            </div>  
        </div>  
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="youtube.js"></script>
</html>

我做了一些研究，我怀疑 Firefox 中的错误部分是由于浏览器的特性造成的。但是，我也无法在 Chromium 中获得预期的结果，这让我认为问题肯定还有更多。我无法使用 Chrome 进行检查，因为我的计算机不支持 Chrome。我非常感谢任何帮助找出问题所在。

4

1 回答 1

0

正如 Guy Incognito 指出的那样，“</form id="form"> <-- id 必须放在开始标签上，而不是结束标签上”。这解决了这个问题。

于 2020-11-16T14:40:05.077 回答