我的Javascript中未捕获的TypeError-用于从Javascript调用HTML

所以我是个新手，不擅长JavaScript，为了完成课程中的作业，我必须创建一个web应用程序，它的工作原理类似于租车网站上的旅行计算器。因此，它意味着获取用户输入的内容，并基于此返回报价。-我从我的导师和其他同学那里得到了很多帮助，但是我们刚刚开始了周末，周日晚上就要到了，我很害怕，因为我不知道如何完成它

我现在想做的是让it打印一份报价，报价是基于他们每天行驶的公里数和他们选择的车辆类型的计算。 在我的当前状态下，这是我的代码：

我在这里创建了一个JS小提琴项目：

我当前的问题是，我遇到了以下错误：

据我所知，这与这里的代码有关：

功能显示车辆（车辆）{
var s=''；
$。每个（车辆、功能（i、车辆）{
s=s+GetHtmlHicleitem（车辆）；
});
//如果车辆列出包含项目的容器，则设置内部HTML
vehicleListEl.html；//填充包装器
车辆按钮=$（“.车辆按钮”）；
$。每个（车辆按钮，功能（i，车辆按钮）{
$（此）.on（'click'，函数（）{
var selectedVehicleId=$（this）.data（'id'）；
var vehicle=getVehicleByID（已选择VehicleId）；
var vehicleInfoHTML=getHTMLVehicleInfo（车辆）；
$（“#详细信息包装-”+vehicle.id）.html（vehicleInfoHTML）；
$（'.quoteButton-'+vehicle.id）.on（“单击”，函数（）{
显示报价（车辆）；
});
变量包装=$（“#详细包装-”+vehicle.id）；
$（“#详细信息包装-”+vehicle.id）.show（）；
console.log（）；
//使用jquery查找包装器div-让vehicle对象可以用作ID。
$（“#隐藏-”+vehicle.id）。单击（函数（）{
$（“#详细信息包装-”+vehicle.id）.hide（）；
});
//selectedVehicle=findVehicleByName（vehicleArray，selectedVehicleName）；
});
});
////瞄准车辆
//var车辆=$（“.车辆列表--项目”）；
////循环并添加click事件侦听器
//$。每个（车辆、功能（i、车辆）{
//$（此）.on（'click'，函数（）{
//显示车辆（$（本））；
//     });
// });
}

在fiddle的JS第21行中，似乎您正在尝试加载一些JSON资源

$.getJSON('json/vehicles.json', function(data) {

如果打开F12工具，您会注意到此错误：

HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier).

---

如果您必须在小提琴中加载一些外部JSON，这个答案可能会帮助您在解决方案中走得更远：

您需要隔离代码中麻烦的部分-这里的代码有点太多，您对赋值的描述太广泛。我现在能告诉你的是你的错误意味着什么。在您发布的第二个函数中，

${vehicle.engineSize}

正在为传入的

车辆

查找属性

engineSize

，但您的

车辆

为空。看看你调用

GetHtmlHicleInfo

的地方，看看为什么传入的车辆是空的。再加上@General_Twyckenham所说的，JS Fiddle的代码太多了，更不用说它在它所处的状态下不会产生你提到的错误了（它尝试发出JSON请求，但没有效果。请提供JSON请求返回的内容。）。抱歉，伙计们，我会记得下次尝试精简它。我只是想展示所有代码，帮助理解它。啊，很抱歉，我现在用JSON文件更新了JSFIDLE，所以它应该可以工作。这解决了你的问题吗？看起来小提琴从昨天开始没有改变。没有-它应该有。：/那么，据我所知，您仍在尝试从不存在的路径加载JSON文件。因此，当您调用

$.getJSON（'JSON/vehicles.JSON'）时

，一个在开发人员控制台中抛出的错误。解决方案是从JSFIDLE可以理解的有效路径加载JSON数据，或者使用上面链接中描述的

myjson.com

之类的解决方法。是的，JSFIDLE由于某种原因没有更新-不管这有多好。我已经更新了解决了我的问题，我意外地定义了一个类两次（一次在index.html中，一次在main.js中），这导致了错误。谢谢你的帮助。你太棒了