如何通过表单输入在JavaScript中向对象数组添加新对象？

你遇到的核心问题是表单按钮调用的函数无法正确执行数组添加操作，以下是具体修复方案：

1. 修复函数作用域问题 #

你用箭头函数定义的addNewObjet如果未挂载到全局作用域，浏览器的onClick事件无法找到该函数。可以改成普通函数：

function addNewObjet(form) {
    let newTitle = form.inputbox.value;
    bookObjects.push({ title: newTitle });
    // 可选：打印数组确认操作是否生效
    console.log("当前数组内容：", bookObjects);
}

如果坚持用箭头函数，需显式挂载到全局window对象：

window.addNewObjet = (form) => {
    let newTitle = form.inputbox.value;
    bookObjects.push({ title: newTitle });
    console.log("当前数组内容：", bookObjects);
};

2. 确认数组作用域 #

确保bookObjects是全局变量，若它定义在局部函数内部，addNewObjet会无法访问到该数组。示例：

// 全局作用域定义数组，保证函数可访问
let bookObjects = [
    { title: "Defender With A Goal" },
    { title: "Pirate Of The End" },
    { title: "Kings Of Rainbows" },
    { title: "Traitors Of The Forsaken" },
    { title: "Enemies And Invaders" },
];

3. 验证执行效果 #

点击按钮后打开浏览器控制台（F12）查看console.log输出，确认数组是否已添加新元素。若页面未更新，只是缺少数组渲染逻辑，push操作本身已生效。

内容的提问来源于stack exchange，提问作者Raitiko