Question

我一直在控制台中收到此消息：

<块引用>

未捕获的类型错误：无法读取未定义的属性“transaction”。

我尝试删除数据库，重新启动实时服务器，将 add() 移至 onsuccess，但我不知道该怎么做。这行对我来说似乎没问题：const transaction = DB.transaction(['crm'], 'readwrite'); 我检查过的其他答案令人困惑

    (function(){
  let DB;
  const form = document.querySelector('#form');

  document.addEventListener('DOMContentLoaded', () => {
    conectDB();

    form.addEventListener('submit', validates);

  });

  
  function validates(e) {
    e.preventDefault();

    // read all the inputs
    const name = document.querySelector('#name').value;
    const email = document.querySelector('#email').value;
    const phone = document.querySelector('#phone').value;
    const company = document.querySelector('#company').value;

    if(name === '' || email === '' || phone === '' || company === '' ) {
      alertMessage('All Fields are required', 'error');

      return;
      }

      // create an object with the info
      const client = {
        name,
        email,
        phone,
        company,
        id: Date.now()
      }
      console.log(client)
      createNewClient(client);

    }

    function createNewClient(client) {
      const transaction = DB.transaction(['crm'], 'readwrite');
      const objectStore = transaction.objectStore('crm');
        // console.log(objectStore);

      objectStore.add(client);

      transaction.onerror = function() {
        alertMessage('Invalid Input ?', 'error')
      }

      transaction.oncomplete = function() {
        alertMessage('Client Added ?');

        setTimeout(() => {
          window.location.href = 'index.html';
        }, 3000);
      }

    }

  
})();

connectDB 函数是这样的：

function conectDB() {
  const openConection = window.indexedDB.open('crm', 4);

  openConection.onerror = function() {
    console.log('Error')
  }

  openConection.onsuccess = function() {
    DB = openConection.result;
  }
}

function alertMessage(msg, type){

  const alert = document.querySelector('.alert');

  if(!alert) {
      // create the alert
      const divAlert = document.createElement('div');
      divAlert.classList.add('px-4', 'py-3', 'rounded', 'max-w-lg', 'mx-auto', 'mt-6', 'text-center', 'border', 'alert');

      if(type === 'error') {
        divAlert.classList.add('bg-red-100', 'border-red-400', 'text-red-700');
      } else {
        divAlert.classList.add('bg-green-100', 'border-green-400', 'text-green-700');
      }
      
      divAlert.textContent = msg;
      
      form.appendChild(divAlert);

      setTimeout(() => {
        divAlert.remove();
      }, 3000);
    }

  }

Answer 1

通过进行一些修复，我能够创建一个新客户端。请参阅我对您的 newClient.js 文件进行了一些更改，主要问题是即使我们将变量 DB 作为参数传递给函数 conectDB() 唯一一次它会被分配一个值是 连接数据库是否成功？这就是函数createNewClient()在连接数据库成功之前执行的问题，所以我们需要做的是我们需要在之后调用函数createNewClient() 连接数据库成功所以我们需要在连接到数据库成功后调用函数createNewClient()，一种方法是调用createNewClient()内部的函数onsuccess方法，就像我在下面的代码中所做的那样。我不得不对 newClient.js 文件进行一些本地更改，但至少您的问题现在已解决，您可以稍后根据需要重构代码。

记住，一旦连接到数据库成功，请记住调用createNewClient()函数。

var DB;
const form = document.querySelector('#form');

document.addEventListener('DOMContentLoaded', () => {
  form.addEventListener('submit', validates);
});


function validates(e) {
  e.preventDefault();

  // read all the inputs
  const name = document.querySelector('#name').value;
  const email = document.querySelector('#email').value;
  const phone = document.querySelector('#phone').value;
  const company = document.querySelector('#company').value;

  if (name === '' || email === '' || phone === '' || company === '') {
    alertMessage('All Fields are required', 'error');

    return;
  }

  // create an object with the info
  const client = {
    name,
    email,
    phone,
    company,
    id: Date.now()
  }
  console.log(client)
  // createNewClient(client);
  conectDB(client);
}

function conectDB(client) {
  let openConection = window.indexedDB.open('crm', 4);

  openConection.onerror = function () {
    console.log('Error')
  }

  openConection.onsuccess = (event) => {
    DB = event.target.result;
    createNewClient(client);
  };
}

function createNewClient(client) {
  const transaction = DB.transaction(['crm'], 'readwrite');
  const objectStore = transaction.objectStore('crm', { keyPath: 'id', autoIncrement: true });
  // console.log(objectStore);

  objectStore.add(client);

  transaction.oncomplete = function () {
    alertMessage('Client Added ?');

    transaction.onerror = function () {
      alertMessage('Invalid Input ?', 'error')
    }

    setTimeout(() => {
      window.location.href = 'index.html';
    }, 3000);
  };
}

未捕获的类型错误：无法读取 undefined

1 个答案: