Unexpected identifier [object Object]

Question

var costBusRoute = 600;
var busRoute = 0;
var vehCountBus = 0;
var routesBus = [{number:0, vehCount:0}];
var maintBus = 50;

function newBusRoute() {
    busRoute += 1;
    routesBus.push({number:busRoute, vehCount:0});
    viewRoutes(routesBus, "busRoutes", busRoute);
}

function newBus(routenum) {
    vehCountBus += 1;
    routenum.vehCount += 1;
    capacity += 50;
    bank -= 600;
    checkBank();
    checkCapacity();
    eiv += 99;
    checkEIV();
    updateVehNum(routenum);
}

function viewRoutes(routelist, listhtml, routenum) {
    document.getElementById(listhtml).innerHTML = "";
    for (I in routelist) {
        nameList = "<li class='list'><button onclick='editRoute("+routelist+","+routelist[routenum]+")'>" + routelist[I].number + "</button></li>";
        document.getElementById(listhtml).innerHTML += nameList;
    }
}

function editRoute(routelist, routenum) {
    $("#mainContainer").fadeOut();
    document.getElementById("screen").innerHTML = (
        "<h1>Bus Route " + routelist[routenum].number + "</h1>" +
        "<div id='vehicleNum'><p>Vehicles on this route: " + routelist[routenum].vehCount + "</div>" +
        "<p><button onclick='newBus("+routelist[routenum].number+")'>+ Add Vehicle | £600</button><p>Maintenance: £50 per day" +
        "<p><button onclick='delBus("+routelist[routenum].number+")'>- Remove Vehicle</button>" +
        "<p><button onclick='delRoute("+routelist[routenum].number+")'>- Delete Route</button>"
    );
}

I have searched for hours but haven't been able to work out why this throws an error or how to resolve it. Any advice is greatly appreciated!

I'm trying to send the right element from routesBus to editRoute() so that it can edit the key values in that specific element. The error occurs at editRoute() and is shown in the console as Uncaught SyntaxError: Unexpected identifier.

Answer 1

I think there are various problems:

1. As stated in the comments, you try to add the array as a parameter just by concatenating it directly...and the rest of the parameters as well.

nameList = "<li class='list'><button onclick='editRoute("+routelist+","+routelist[routenum]+")'>" + routelist[I].number + "</button></li>";

All you get is is string like :

<li class='list'><button onclick='editRoute([object Object],[object Object]...

2. In addition to that, editRoute expects an array (routelist) and a number (routenum), the index of the item in the array and when you call it, you (attempt to) give the array and the item, not the index.

3. In viewRoutesyou use both the index routenum given as parameter and the index I in the same line. This is inconsistent. You should give up the first one since you are building the whole list and the routenum index seems to be useless here. It could be useful if when building the list, you would like to do something special when I == routenum (set the text in bold, use a specil color or icon...).

To fix 1 & 2, I would rather use the index as the unique parameter of your editRoute function because you can build the html calling it more easily and because the parameter routelist corresponds to routesBuswhich is available from editRoute.

var costBusRoute = 600;
var busRoute = 0;
var vehCountBus = 0;
var routesBus = [{number:0, vehCount:0}];
var maintBus = 50;

function newBusRoute() {
    busRoute += 1;
    routesBus.push({number:busRoute, vehCount:0});
    viewRoutes("busRoutes");
}

function newBus(routenum) {
    vehCountBus += 1;
    routenum.vehCount += 1;
    capacity += 50;
    bank -= 600;
    checkBank();
    checkCapacity();
    eiv += 99;
    checkEIV();
    updateVehNum(routenum);
}

function viewRoutes(listhtml) {
    let nameList  = "";
    for (I in routelist) {
        nameList += `<li class='list'><button onclick='editRoute(${routenum})'>${routesBus[I].number}</button></li>`;

    }
    document.getElementById(listhtml).innerHTML = nameList;
}

function editRoute(routenum) {
    $("#mainContainer").fadeOut();
    let route = routesBus[routenum];
    let number = route.number; //isn't always route.number === routenum?
    // TODO use template literal for the following
    document.getElementById("screen").innerHTML = (
        "<h1>Bus Route " + number + "</h1>" +
        "<div id='vehicleNum'><p>Vehicles on this route: " + route.vehCount + "</div>" +
        "<p><button onclick='newBus("+ number +")'>+ Add Vehicle | £600</button><p>Maintenance: £50 per day" +
        "<p><button onclick='delBus("+ number + ")'>- Remove Vehicle</button>" +
        "<p><button onclick='delRoute(" + number  + ")'>- Delete Route</button>"
    );
}

Note that I used template literals on viewRoutes, you should use it as often as you can. Check lso the other places I have changed. Another thing: since you are using JQuery, your rather learn it a bit, especially .click() and how to append elements with it, which would be a big improvement.