Uncaught TypeError in my Javascript - To do with calling HTML from JavaScript

Question

so I'm really new and bad at JavaScript and for an assignment at course I have to create a web application thing that works like a trip calculator on vehicle hire websites. So it's meant to take what the user inputs and returns a quote based on that. - I've had a lot of help from my tutor and other class members but we have just started the weekend and it's due on Sunday night and I'm freaking out because i have no idea how to finish it.

What I am trying to do at the moment is get it print a quote based on a calculation that is based on how many KM's they'll travel per day and what type of vehicle they have chosen. At my current state this is my code:

I have created a JS Fiddle with the project here: https://jsfiddle.net/myLoucfd/

My current problem is that I am getting this error: https://i.stack.imgur.com/5bUP6.png

From my understanding it has something to do with the code in here:

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

and it seems to be effecting 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>`;
    }

The code is meant to show a list of vehicles you can hire and show you details about them, then let you choose to get a quote which is what I am working on now but the quote needs to calculate based on; how far they are travelling per day, how many people there are and what type of car they have. So at the moment it can search and display the results, however now that I am trying to add the form that lets you input how far you are travelling per day and then submit and get a quote it's breaking and I generally have no clue how to do it.

Any help at all would be greatly appreciated!

Thanks, Dan / A hopeless student

You need to isolate the sections of the code that are troublesome - there's a bit too much code here and your description of the assignment is too broad. What I can tell you right now is what your error means. In the 2nd function you posted, `${vehicle.engineSize}` is looking for the property `engineSize` for the passed in `vehicle` - but your `vehicle` is null. Take a look at where you call `getHTMLVehicleInfo` and see why the vehicle passed in is null — General_Twyckenham, Dec 15 '17 at 03:53
Adding on to what @General_Twyckenham said, the JS Fiddle has simply way too much code to go through, not to mention that it does not produce the error you mentioned in the state it is in (it tries to make a JSON request, to no avail. Please provide what the JSON request returns.). — pepperjack, Dec 15 '17 at 03:54
Sorry about that guys, I'll remember to try and slim it down for next time. I just thought showing all the code with help with understanding it. — TiggaBiscuit, Dec 16 '17 at 04:45

score 1 · Accepted Answer · answered Dec 15 '17 at 03:58

1

In line 21 of your fiddle's JS, it appears that you're trying to load some JSON resource.

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

You'll notice this error if you open your F12 tools:

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

This answer might help you get further along in your solution, if you must load some external JSON into your fiddle: https://stackoverflow.com/a/24927167/2147110

answered Dec 15 '17 at 03:58

dperish

1,493
16
27

Ahh, sorry about that I have now updated the JSFiddle with the JSON file so it should be working. – TiggaBiscuit Dec 15 '17 at 09:47
Did that solve your issue then? It appears as though the fiddle hasn't changed from yesterday. – dperish Dec 15 '17 at 18:09
No it hasn't - and it should have. :/ – TiggaBiscuit Dec 16 '17 at 04:05
Well then, as far as I can see you're still trying to load up a JSON file from a path which doesn't exist. So when you call `$.getJSON('json/vehicles.json' ... )`, an error that gets throw in the developer console. The solution is to load the JSON data from a valid path that JSFiddle can understand, or by using one of the workarounds such as `myjson.com` which is described in the link above. – dperish Dec 16 '17 at 04:15
1

Yea the JSFiddle didn't update for some reason - however good things have come out of this. I have resolved my problem, I was accidentally defining a class twice (once in the index.html and once in the main.js), this was causing the error. Thank you for all your help. You've been awesome! :D – TiggaBiscuit Dec 16 '17 at 04:45

Uncaught TypeError in my Javascript - To do with calling HTML from JavaScript

1 Answers1