javascript - 在我的 Javascript 中未捕获的 TypeError - 从 JavaScript 调用 HTML

Question

所以我真的是个新手，不擅长 JavaScript，对于类(class)中的作业，我必须创建一个 Web 应用程序，它像汽车租赁网站上的行程计算器一样工作。所以它意味着获取用户输入的内容并返回基于此的报价。 - 我从我的导师和其他类(class)成员那里得到了很多帮助，但我们刚刚开始这个周末，它将于周日晚上到期，我吓坏了，因为我不知道如何完成它。

我目前正在尝试做的是让它根据计算打印报价，该计算基于他们每天行驶的公里数以及他们选择的车辆类型。在我目前的状态下，这是我的代码:

我在这里用项目创建了一个 JS Fiddle:https://jsfiddle.net/myLoucfd/

我当前的问题是出现此错误:/image/5bUP6.png

根据我的理解，它与这里的代码有关:

function displayVehicles(vehicles) {
        var s = '';
        $.each(vehicles, function (i, vehicle) {
            s = s + getHTMLVehicleItem(vehicle);
        });
        //Set inner HTML if Vehicles list container with items
        vehicleListEl.html(s); // populating the wrapper
        vehicleButtons = $('.vehicle-button');
        $.each(vehicleButtons, function (i, vehicleButton) {
            $(this).on('click', function () {
                var selectedVehicleId = $(this).data('id');
                var vehicle = getVehicleByID(selectedVehicleId);
                var vehicleInfoHTML = getHTMLVehicleInfo(vehicle);
                
                $("#detail-wrapper-" + vehicle.id).html(vehicleInfoHTML);
                
                $('.quoteButton-' + vehicle.id).on("click", function(){
                    displayQuote(vehicle);
                });
                
                var wrapper = $("#detail-wrapper-" + vehicle.id);
                $("#detail-wrapper-" + vehicle.id).show();
                console.log();
                // use jquery to find the wrapper div - have the vehicle object can use as the ID.
                $("#hide-" + vehicle.id).click(function () {
                    $("#detail-wrapper-" + vehicle.id).hide();
                });
                // selectedVehicle = findVehicleByName(vehicleArray, selectedVehicleName);
            });

        });
        // //Target the Vehicles
        // var vehicles = $('.vehicle-list--item');
        // //Loop through and add click event Listeners
        // $.each(vehicles, function (i, vehicle) {
        //     $(this).on('click', function () {
        //         displayVehicles($(this));
        //     });
        // });
    }

它似乎正在影响这个:

function getHTMLVehicleInfo(vehicle) {
        return `<div class="expanded-info">
                    <div></div>
                    <div>
                        <ul>
                            <li>${vehicle.engineSize}</li>
                            <li>${vehicle.driveType}</li>
                            <li>${vehicle.fuelTank}</li>
                            <li>${vehicle.transmissionType}</li>
                            <li>${vehicle.multiMedia}</li>
                            <li>${vehicle.safetyFeatures}</li>
                            <li>${vehicle.reversingCamera}</li>
                            <button class="quoteButton-${vehicle.id}">Get Quote</button>
                            <div id="displayedQuote-${vehicle.id}"></div>
                        </ul>
                    </div>
                </div>`;
    }

该代码旨在显示您可以租用的车辆列表并向您显示有关它们的详细信息，然后让您选择获取报价，这是我现在正在做的，但报价需要根据；他们每天走多远，有多少人，他们有什么类型的汽车。所以目前它可以搜索并显示结果，但是现在我正在尝试添加一个表格，让你输入你每天旅行的距离，然后提交并获得它正在中断的报价，我通常不知道如何做吧。

如有任何帮助，我们将不胜感激!

谢谢，丹/一个绝望的学生

Answer 1

在您的 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 加载到您的 fiddle 中，这个答案可能会帮助您在解决方案中取得进一步进展:https://stackoverflow.com/a/24927167/2147110