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

时间：2018-07-31 00:56:52

标签： javascript jquery html css twitter-bootstrap-3

我正在编写一些代码来首次使用外部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 &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>

由于某种原因，控制台给我以下错误：

“ TypeError：document.getElementById（...）为空”

当我尝试输入搜索栏时，出现以下错误：

“ ReferenceError：未定义getJSON”

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

1 个答案:

答案 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 &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>');

    });
});}
相关问题
最新问题