向数据库添加数据时发生错误

An error occurs while adding data to the database

在应用程序中,用户可以创建自己的银行。他将适当的数据输入到字段中,当您单击“添加”按钮时,这些字段应该被写入数据库。但是现在当我点击时,我得到一个错误 - Uncaught FirebaseError: Function addDoc() called with invalid data。不支持的字段值:自定义 HTMLInputElement 对象(在文档 bank-items/AMgVThS6caX9BJuCeezJ 的字段 bankName 中找到) 如何解决?

const addBankButton = document.getElementById("add-bank");

const addBankFunc = () => {
  addBankButton.addEventListener("click", (event) => {
    event.preventDefault();
    const bankName = document.getElementById("bank-name");
    const interestRate = document.getElementById("interest-rate");
    const maximumLoan = document.getElementById("maximum-loan");
    const minimumDownPayment = document.getElementById("minimum-down-payment");
    const loanTerm = document.getElementById("loan-term");

    db.collection("bank-items").add({
      bankName: bankName,
      interestRate: interestRate,
      maximumLoan: maximumLoan,
      minimumDownPayment: minimumDownPayment,
      loanTerm: loanTerm,
    });
  });
};

addBankFunc();
   <form>
                        <input id="bank-name" type="text" placeholder="Bank name" />
                        <input id="interest-rate" type="text" placeholder="Interest rate" />
                        <input id="maximum-loan" type="text" placeholder="Maximum loan" />
                        <input id="minimum-down-payment" type="text" placeholder="Minimum down payment" />
                        <input id="loan-term" type="text" placeholder="Loan term" />
                        <button id="add-bank">Add bank</button>
                    </form>

您应该将输入字段的 传递给 Firestore(即 string/number),而不是 HTML 元素本身。尝试 getElementById return an Element object that is not a valid Firestore data type。尝试重构代码,如下所示:

const bankName = document.getElementById("bank-name").value;
// add .value for every element