我正在编写一些代码来首次使用外部API来测试我的技能。
我设法使页面填充了API信息，但是我需要这样做，以便用户可以通过在搜索栏中键入来更改API信息的读出。我已使用Bootstrap 3编码在navbar元素中放置了搜索栏。这是导航栏的代码：
<nav class="navbar navbar-default navbar-expand-xl" id="filterBar"><a class="navbar-brand navbar-left" id="filterBarBrand">The Set List</a>
<div class="container" id="navContain2" style="margin-right: 80px;">
<form class="navbar-form navbar-right" style="padding-left: 50px;">
<div class="form-group">
<input id="enterText" type="text" class="form-control" onKeyUp="getJSON()" onChange="getJSON()" placeholder="Search for Beer Name or Type" style="width: 300px;">
</div>
<button type="button" class="btn btn-default" id="searchSubmit" onClick="getJSON()"><i class="glyphicon glyphicon-search"></i></button>
</form>
<div class="collapse navbar-collapse" id="myFilter">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"><strong>FILTER BY</strong></a>
<ul class="dropdown-menu" id="fliter">
<li class="dropdown-header"><strong>FLAVOR NOTES</strong></li>
<label class="checkbox-inline"><input type="checkbox" value="">Hoppy</label>
<label class="checkbox-inline"><input type="checkbox" value="">Citrus</label>
<label class="checkbox-inline"><input type="checkbox" value="">Malty</label>
<label class="checkbox-inline"><input type="checkbox" value="">Herbal</label>
<label class="checkbox-inline"><input type="checkbox" value="">Bitter</label>
<label class="checkbox-inline"><input type="checkbox" value="">Fruity</label>
<label class="checkbox-inline"><input type="checkbox" value="">Toasty</label>
<label class="checkbox-inline"><input type="checkbox" value="">Earthy</label>
<label class="checkbox-inline"><input type="checkbox" value="">Sour</label>
<label class="checkbox-inline"><input type="checkbox" value="">Dry</label>
<label class="checkbox-inline"><input type="checkbox" value="">Caramel</label>
<label class="checkbox-inline"><input type="checkbox" value="">Smokey</label>
<label class="checkbox-inline"><input type="checkbox" value="">Tart</label>
<label class="checkbox-inline"><input type="checkbox" value="">Crisp</label>
<label class="checkbox-inline"><input type="checkbox" value="">Toffee</label>
<label class="checkbox-inline"><input type="checkbox" value="">Spicey</label>
<li class="dropdown-header"><strong>IBU</strong></li>
<li class="dropdown-header"><strong>ABV</strong></li>
</ul>
</li>
</ul>
</div>
</div>
</nav> <!-- End Navbar -->
每当用户在搜索栏中键入某些内容（id =“ #enterText”）时，都应该调用函数“ getJSON”。
我有一个外部.js文件（JSON.js），其中包含我的JavaScript代码：
var api = 'https://api.punkapi.com/v2/beers?beer_name=';
var input = "punk";
var url = api + input;
//document.getElementById('enterText').value;
$.getJSON(url, function(data){
"use strict";
console.log(input);
$.each(data, function(index, value){
console.log(value);
var imageURL = value.image_url;
var name = value.name;
var tag = value.tagline;
var ibu = value.ibu;
var abv = value.abv;
var desc = value.description;
var food1 = value.food_pairing[0];
var food2 = value.food_pairing[1];
var food3 = value.food_pairing[2];
// $('.image img').attr('src', imageURL);
// $('.name').text(name);
// $('.tag').text(tag);
// $('.ibu').text(ibu);
// $('.abv').text(abv);
// $('.desc').text(desc);
// $('.food1').text(food1);
// $('.food2').text(food2);
// $('.food3').text(food3);
$('.output').append('<div class="row" id="beerRow"><div class="col-sm-3"><div class="image" align="right"><img src="' + imageURL + '"/ height="350px"></div><br><br></div><div class="col-sm-6"><h2 class="name">' + name + '</h2><h3 class="tag">' + tag + '</h3><span id="numbers"><p>IBU   </p> <p class="ibu" style="color: #929292; font-size: 1.15em">' + ibu + '</p><p>  ABV   </p> <p class="abv" style="color: #929292; font-size: 1.15em">' + abv + '</p></span><p class="desc">' + desc + '</p><div class="row"><div class="col-sm-1" align="right"><img src="Images/icon_food_pairing.svg" height="30" width="30"></div><div class="col-sm-11" align="left"><h4 class="food1">' + food1 + '</h4><h4 class="food2">' + food2 + '</h4><h4 class="food3">' + food3 + '</h4></div></div></div></div><br><br><br>');
});
});
我已将.js文件加载到HTML文件的开头：
<head>
<title>Punk Out Brews</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
<link rel="icon" type="image/png" sizes="32x32" href="Images/icon_beer_mug.svg"/>
<link rel="icon" type="image/png" sizes="16x16" href="Images/icon_beer_mug.svg"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="CSS.css">
<script src="JSON.js"></script>
</head>
由于某种原因，控制台给我以下错误：
“ TypeError：document.getElementById（...）为空”
当我尝试输入搜索栏时，出现以下错误：
“ ReferenceError：未定义getJSON”
我已尽一切努力确保两个文件能够通信。我什至尝试将它们放在同一文件中，但得到相同的结果。知道为什么这行不通吗？
答案 0 :(得分：0)
尝试将调用放置在名为getJSON（）的函数中，例如：
function getJSON(){
$.getJSON(url, function(data){
"use strict";
console.log(input);
$.each(data, function(index, value){
console.log(value);
var imageURL = value.image_url;
var name = value.name;
var tag = value.tagline;
var ibu = value.ibu;
var abv = value.abv;
var desc = value.description;
var food1 = value.food_pairing[0];
var food2 = value.food_pairing[1];
var food3 = value.food_pairing[2];
// $('.image img').attr('src', imageURL);
// $('.name').text(name);
// $('.tag').text(tag);
// $('.ibu').text(ibu);
// $('.abv').text(abv);
// $('.desc').text(desc);
// $('.food1').text(food1);
// $('.food2').text(food2);
// $('.food3').text(food3);
$('.output').append('<div class="row" id="beerRow"><div class="col-sm-3"><div class="image" align="right"><img src="' + imageURL + '"/ height="350px"></div><br><br></div><div class="col-sm-6"><h2 class="name">' + name + '</h2><h3 class="tag">' + tag + '</h3><span id="numbers"><p>IBU   </p> <p class="ibu" style="color: #929292; font-size: 1.15em">' + ibu + '</p><p>  ABV   </p> <p class="abv" style="color: #929292; font-size: 1.15em">' + abv + '</p></span><p class="desc">' + desc + '</p><div class="row"><div class="col-sm-1" align="right"><img src="Images/icon_food_pairing.svg" height="30" width="30"></div><div class="col-sm-11" align="left"><h4 class="food1">' + food1 + '</h4><h4 class="food2">' + food2 + '</h4><h4 class="food3">' + food3 + '</h4></div></div></div></div><br><br><br>');
});
});}