TypeError: xxx is not a function

Question

This question has been answered before, but I'm a javascript beginner and am struggling to apply other peoples solutions to my problem. I apologize in advance!

I'm following the Beginning Javascript 5th edition book and in the Objects chapter, it's making me build a Cinema booking system. I keep getting a TypeError: xxx is not a function, but I can't seem to figure out why. The code seems to be fine (it clearly isnt.. :)). The error appears as I'm initializing 'bookings' in a new array, using the Cinema() constructor. Error is on line 53.

Would love some help, the book isn't very helpful. I've checked it line by line.

Thanks!

//CustomerBooking type

function CustomerBooking (bookingID, customerName, film, showDate) {
this.customerName = customerName;
this.bookingID = bookingID;
this.film = film;
this.showDate = showDate;
}

CustomerBooking.prototype.getCustomerName = function () {
return this.customerName;
}

CustomerBooking.prototype.setCustomerName = function (customerName) {
this.customerName = customerName;
}

CustomerBooking.prototype.getShowDate = function () {
return this.showDate;
}

CustomerBooking.prototype.setShowDate = function (showDate) {
this.showDate = showDate;
}

CustomerBooking.prototype.getFilm = function () {
return this.getFilm;
}

CustomerBooking.prototype.setFilm = function (film) {
this.film = film;
}

CustomerBooking.prototype.getbookingID = function () {
return this.bookingID;
}

CustomerBooking.prototype.setbookingID = function (bookingID) {
this.bookingID = bookingID;
}

// Cinema Type

function Cinema() {
this.bookings = new Array();
}

Cinema.prototype.addBooking = function (bookingID, customerName, film, showDate) {
this.bookings(bookingID) = new CustomerBooking(bookingsID, customerName, film, showDate);
}

Cinema.prototype.getBookingsTable = function() {
var booking;
var bookingsTableHTML = "<table border=1>";

for (booking in this.bookings)
{
    bookingsTableHTML += "<tr><td>";
    bookingsTableHTML += this.bookings(booking).getBookingID();
    bookingsTableHTML += "</td>";

    bookingsTableHTML += "<td>";
    bookingsTableHTML += this.bookings(booking).getCustomerName();
    bookingsTableHTML += "</td>";

    bookingsTableHTML += "<td>";
    bookingsTableHTML += this.bookings(booking).getFilm();
    bookingsTableHTML += "</td>";

    bookingsTableHTML += "<td>";
    bookingsTableHTML += this.bookings(booking).getShowDate();
    bookingsTableHTML += "</td>";
    bookingsTableHTML += "</tr>";
}

bookingsTableHTML += "</table>";
return bookingsTableHTML;
}

var londonOdeon = new Cinema();
londonOdeon.addBooking(401, "AJ", "Toy Story", "1 Jan 2015");
londonOdeon.addBooking(402, "Michelle", "Silver Lining Playbook", "2 Jan 2015");
londonOdeon.addBooking(403, "James", "Terminator", "3 Jan 2015");
londonOdeon.addBooking(404, "Josh", "Balooons", "4 Jan 2015");

document.write(londonOdeon.getBookingsTable());

Answer 1

bookings is an array. In order to access an element with a given index, you must use square brackets, not parentheses like a function call

this.bookings(booking) becomes this.bookings[booking]

You were calling this.bookings like a function, but it is actually an Array, hence the error.

Answer 2

This error can be caused by syntax error, as was in my case.

The function 'XXX' was declared but there was an incorrect } which caused that function not be seen by the compiler. The following is the correct code which I fixed by putting the } in the correct place as indicated int the code.

const pressHandler = (key) =>{
    setTodo((prevToDo) => {
      return prevToDo.filter(todo => todo.key != key)
    });
  }          <----- This bracked was misplaced and appeared at the end of the block that cause the 'SubmitHandld

    const submitHandler = (text1) =>{
      setTodo((prevTodo)=>{
        return [
          {text:text1, key:Math.random().toString() },
          ...prevTodo
        ]
      })
    }