创建和存储财务记录
在这一步中,你将与 Alex 一起创建一个结构,用于将财务记录作为对象存储在数组中。这个设置将成为财务追踪器数据管理系统的核心,允许动态更新和操作财务记录。
首先,让我们定义财务记录的结构。每条记录将包含描述、金额和类型(收入或支出)。打开你的 script.js
文件,首先创建一个数组来存储这些记录:
let records = [];
接下来,创建一个函数来向数组中添加新记录。每条记录将是一个对象:
const addRecord = (description, amount, type) => {
records.push({ description, amount, type });
};
你还不能在页面上看到任何内容,因为我们还没有完成监听提交事件的函数。
在 ~/project/script.js
中定义 form.addEventListener("submit", (e) => {})
,以监听点击“添加”按钮时的交互。
// 监听表单提交事件以添加新记录
form.addEventListener("submit", (e) => {
e.preventDefault();
const description = document.getElementById("description").value;
const amount = document.getElementById("amount").value;
const type = document.getElementById("type").value;
addRecord(description, amount, type);
});
preventDefault()
是 Event 接口的方法,它告诉用户代理,如果事件没有被显式处理,则不应像通常那样执行默认操作。
value
是 HTMLDataElement 接口的属性,返回反映 value HTML 属性的字符串。
此时,如果你在 addRecord
函数中添加 console.log(records);
,你可以看到添加到记录中的数据将被记录到 records
中。
如果我们想要显示添加到分类账中的记录,我们需要创建 renderRecords
函数,但在那之前,我们需要学习模板字符串。