Неожиданный идентификатор [объект 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>"
    );
}

Я искал несколько часов, но не смог понять, почему это приводит к ошибке или как ее устранить. Будем благодарны за любые советы!

Я пытаюсь отправить нужный элемент из routesBus в editRoute(), чтобы он мог редактировать значения ключа в этом указанном c элементе. Ошибка возникает на editRoute() и отображается в консоли как Uncaught SyntaxError: Unexpected identifier.

Answer 1

Я думаю, что существуют различные проблемы:

1. Как указано в комментариях, вы пытаетесь добавить массив в качестве параметра, просто конкатенируя его напрямую ... и остальные параметры, а также .

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

Все, что вы получаете, это строка типа:

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

В дополнение к этому, editRoute ожидает array (routelist) и number (routenum), индекс элемента в массиве, и когда вы вызываете его, вы (попытка) дать массив и элемент, а не индекс.

В viewRoutes вы используете как индекс routenum, заданный в качестве параметра, так и индекс I в та же строка Это противоречиво. Вы должны отказаться от первого, поскольку вы строите весь список, а индекс routenum здесь кажется бесполезным. Это может быть полезно, если при создании списка вы хотели бы сделать что-то особенное, когда I == routenum (установите текст жирным шрифтом, используйте цвет или значок specil ...).

Чтобы исправить 1 и 2, я бы предпочел использовать индекс в качестве уникального параметра вашей editRoute функции, потому что вы можете создать html, вызывая его проще, и потому что параметр routelist соответствует routesBus, который доступен из 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>"
    );
}

Обратите внимание, что я использовал литералов шаблона на viewRoutes, вы должны использовать его как можно чаще. Проверьте также другие места, которые я изменил. Другое дело: так как вы используете JQuery, вы, скорее, немного его изучите, особенно .click() и как добавлять к нему элементы, что было бы большим улучшением.