javascript - 在外部 JavaScript 文件中调用函数时出错

Question

我正在编写一些代码来测试我第一次使用外部 API 的技能。

我已经设法让页面填充 API 信息，但我需要这样做，以便用户可以通过在搜索栏中键入来更改 API 信息的读出。我使用 Bootstrap 3 编码在导航栏元素中放置了一个搜索栏。这是导航栏的代码:

<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 &nbsp </p> <p class="ibu" style="color: #929292; font-size: 1.15em">' + ibu + '</p><p>&nbsp ABV &nbsp </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>

出于某种原因，控制台出现以下错误:

“类型错误:document.getElementById(...) 为空”

当我尝试在我创建的搜索栏中输入内容时，出现以下错误:

“ReferenceError:未定义 getJSON”

我已尽一切努力确保这两个文件正在通信。我什至尝试将它们放在同一个文件中，但得到了相同的结果。知道为什么这不起作用吗？

Answer 1

尝试将您的调用放在一个名为 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 &nbsp </p> <p class="ibu" style="color: #929292; font-size: 1.15em">' + ibu + '</p><p>&nbsp ABV &nbsp </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>');

    });
});}