Error when calling function in external JavaScript file

Question

I'm writing up some code to test my skills with an external API for the first time.

I've managed to get the page to populate with the API information, but I need to make it so that the user can alter the readout of the API information by typing in the search bar. I've placed a search bar in a navbar element using Bootstrap 3 coding. Here's the code for the 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 --> 

It's supposed to call the function "getJSON" whenever the user types something in the search bar (id = "#enterText").

I have an external .js file (JSON.js) with my JavaScript code contained within:

 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>'); }); }); 

I've loaded the .js file into the head of the HTML file:

 <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> 

For some reason, the console is giving me the following error:

"TypeError: document.getElementById(...) is null"

When I try typing into the search bar I made, I get the following error:

"ReferenceError: getJSON is not defined"

I've tried everything to ensure that the two files are communicating. I even tried putting them in the same file, but got the same results. Any idea why this isn't working?

Answer 1

Try placing your call in a function called getJSON(), like:

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>');

    });
});}