Why am I getting undefined for the values after submit?

See more:

Javascript

//food class
class Food {
    constructor(time, date, meal) {
        this._time = time;
        this._date = date;
        this._meal = meal;
    }
}

//UI handle class
class UI {
    static displayFoods() {
        const storedFoods = [
            {
                time: '12:00',
                date: '31.10.2021',
                meal: 'Bratwurst'
            },
            {
                time: '12:00',
                date: '31.10.2021',
                meal: 'Marronni'
            },
        ];

        const foods = storedFoods;

        foods.forEach((food) => UI.addFoodToList(food));
    }
    static addFoodToList(food){
        const list = document.getElementById('food-form-extended');
        const row = document.createElement('tr');
        row.innerHTML = `
        <td>${food.time}</td>
        <td>${food.date}</td>
        <td>${food.meal}</td>
        <td><a href="#" class="btn btn-success btn-sm delete">X</a></td>
        `;

        list.appendChild(row);
    }
}

//storage class with local storage




//events
// Display food
document.addEventListener('DOMContentLoaded', UI.displayFoods);
//Add food
document.getElementById('food-form').addEventListener('submit', (e) => {
//prevent default
    e.preventDefault();

//get forms values
    const time = document.getElementById('time').value;
    const date = document.getElementById('date').value;
    const meal = document.getElementById('meal').value;

//instanciate food
    const menu = new Food(time, date, meal);

//add food to list
    UI.addFoodToList(menu);

});

//Remove food

What I have tried:

Trying to build a little food tracker for myself and learn. Unfortunately I'm getting undefined for all the values like time, date and meal after submitting the form. What am I doing wrong guys :)