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

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

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

风味笔记

快乐
柑橘
麦芽糖
草药
苦的
果味的
烤面包
土的
酸的
干的
焦糖
冒烟的
尖酸的
脆的
太妃糖
辛辣的
IBU
ABV

尝试将调用放在名为getJSON（）的函数中，如：

函数getJSON（）{ $.getJSON（url、函数（数据）{ “严格使用”； 控制台日志（输入）； $.each（数据、函数（索引、值）{ console.log（值）； var imageURL=value.image\u url； var name=value.name； var tag=value.tagline； var ibu=value.ibu； var abv=value.abv； var desc=value.description； var food1=值。食物与配对[0]； var food2=值。食物与配对[1]； var food3=价值、食物与配对[2]； //$（'.image img'）.attr（'src'，imageURL）； //$（'.name'）.text（name）； //$（'.tag'）.text（tag）； //$（'.ibu'）。文本（ibu）； //$（'.abv'）。文本（abv）； //$（'.desc'）.text（desc）； //$（'.food1'）.text（food1）； //$（'.food2'）.text（food2）； //$（'.food3'）.text（food3）； $（'.output'）.append（'

'+name+'+tag+'IBU

”+IBU+”ABV

您当前没有任何名为

getJSON

的函数。我在HTML文件中有“getJSON（）”函数，并在JavaScript文件中编写和定义，如上所述。为什么你说我没有它？不，你的Javascript中没有任何

函数getJSON（）{…}

。通过

$.getJSON

，您可以访问对象

$

的属性

getJSON

。我明白了。很抱歉，我遵循了这方面的教程，我不确定如何调用我在JavaScript文件中编写的函数。document.getElementById（…）不匹配任何内容，因为您在head元素中包含了脚本。这意味着DOM尚未加载。谢谢。这解决了调用函数的第一个问题。现在我遇到了JavaScript变量的问题，该变量应该接收用户的输入。下面是应该组成url字符串的变量：var api=''；var input=document.getElementById（'enterText'）。值；var url=api+input；现在，我得到以下错误：TypeError:document.getElementById（…）为null在getJSON（）函数的开头，插入如下内容：var api=“api.punkapi.com/v2/beers？beer_name=”；var输入=$（“enterText”）.val（）；var url=api+input；我做了一些修改（添加了$（'.output'）.empty（）；）命令以在每次进行搜索时清除列表），但现在它可以工作了。谢谢

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

    });
});}