Uncaught SyntaxError: Unexpected token '.' - JavaScript OOP excercise

I'm trying to create a function post catching an event, there is a problem with an unexpected dot. I've tried different things like using a const to the elementId and then assign an event listener, but it didn't work.

class product {
    constructor(name, price, year) {
        this.name = name;
        this.price = price;
        this.year = year;
    }

}

class UI {
    addProduct(product) { 
        const productList = document.getElementById('product-list');
        const element = document.createElement('div');
        element.innerHTML = `
        <div class="card text-center mb-4">
            <div class="card-body">
                <strong>Product</strong>: ${product.name}
                <strong>Price</strong>: ${product.price}
                <strong>Year</strong>: ${product.year}
            </div>
        </div>
        `;
        productList.appendChild(element); 
    /*deleteProduct() {

    }
    showMessage() {

    }*/
}

document.getElementById('product-form').addEventListener('submit', function (e) {
    const name = document.getElementById('name').value;
    const price = document.getElementById('price').value;
    const year = document.getElementById('year').value;
    console.log('it works');
    const product = new product(name, price, year); /// my product recieves as parameters the attributes
    /// captured on the function
    
    const ui = new UI();
    ui.addProduct(product);
    
    e.preventDefault();
})

The main idea is to append this card to the DOM, but the unexpected token '.' ruins the idea. I'm new at JS, so I'll preciate help!

2 answers

  • answered 2020-09-14 05:42 Sei4or

    The body of functions in JavaScript should be opened with { and closed with } with statements in between. You missed the closing bracket for addProduct. I would recommend using an editor that can at least highlight the brackets so you don't run into this problem.

  • answered 2020-09-14 05:49 Ross 'Hamza' Foy

    You need to close the curly braces for your class UI.