Okay guys, this is a follow up to a previous question I asked, about the arrays. It turns out your answers were quite helpful, but my program still won't work. I'll explain the assignment and then post the code, so you can see what the problem is. So I have an html page with an unsorted list of cars. Each car has a a key, a manufacturer and a model. There's a form for inserting a new car on the bottom of the page and two buttons. By clicking one button you need to create an object, which represents a car, with the data that was inserted. That object needs to be added to a global array. There's another button, that has the task to insert the object from the middle of the global array to the html list (that's the thing my previous question was about). Then the object needs to be removes from the array. If the array is empty, there needs to be a message reading "The array is empty" in red. This is the way I've done it, but there's an error message saying "Uncaught TypeError: Cannot read properties of undefined (reading 'key')" Please help, I wanna know how you would do this.

let globalArray = [];

function add() {
    var key = document.querySelectorAll("input")[0];
    var manufacturer = document.querySelectorAll("input")[1];
    var model = document.querySelectorAll("input")[2];

    var car = {
        key: key.value,
        manufacturer: manufacturer.value,
        model: model.value 
    }
    globalArray.push(car);
}

function fill(){
    if (globalArray.length == 0){
        let msg = document.querySelector("p");
        msg.innerHTML = "The array is empty.";
        msg.style.color = "red";
    }

    else {
        if(globalArray.length % 2 == 0) {
            let list = document.querySelectorAll("ul");
            let li = document.createElement("li");
            li.innerHTML = `${globalArray[globalArray.length / 2 - 1].key} 
${globalArray[globalArray.length / 2 - 1].manufacturer} ${globalArray[globalArray.length / 2 - 1].model}`;
            lista.appendChild(li);
            globalni.splice(globalArray[globalArray.length / 2 - 1], 1);
        }
        else {
            let list = document.querySelectorAll("ul");
            let li = document.createElement("li");
            li.innerHTML = `${globalArray[Math.round(globalArray.length / 2)].key} ${globalArray[Math.round(globalArray.length / 2)].manufacturer} ${globalArray[Math.round(globalArray.length / 2)].model}`
            lista.appendChild(li);
            globalArray.splice(globalArray[Math.round(globalArray.length / 2)], 1);
        }
    }
}