将数据添加到indexeddb时出错，add（）函数会打印出错误

Question

我想在客户端使用JavaScript严格创建一个Crud应用程序，而无需任何使用索引db的库的帮助，我是db的新手，我不明白为什么它不起作用，这是我的代码

window.indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB;

let request = window.indexedDB.open("susan", 3),
  db,
  transaction,
  store,
  index,
  task = document.getElementById("task"),
  time = document.getElementById('time'),
  date = document.getElementById('date');
let todo = {
  task: task,
  time: time,
  date: date
}

request.onupgradeneeded = function(e) {
  let db = request.result;
  store = db.createObjectStore("tasks", {
    keyPath: "id",
    autoIncrement: true
  });
}

request.onerror = function(e) {
  console.log("Error: " + e.target.error);
}

request.onsuccess = function(e) {
  db = request.result;
  transaction = db.transaction(["tasks"], "readwrite");
  store = transaction.objectStore("tasks");

  db.onerror = function(e) {
    console.log("Error: " + e.target.error);
  }
}

document.getElementById('add').addEventListener("click", function() {
  store.add(todo);
  console.log("Successfull added");
});

错误消息是：

Uncaught DOMException: Failed to execute 'add' on 'IDBObjectStore': The transaction has finished.
at HTMLAnchorElement.<anonymous> (http://127.0.0.1:5500/index.html:217:11)
(anonymous) @ index.html:217