Question

我正在尝试创建一个简单的费用跟踪器页面，使用非常少量的引导程序（对于我的按钮）。但是，当我按下按钮向我的表追加一个新行时，我在控制台中收到以下错误。我在我的js文件中有这个功能，但无论我做什么，我都无法弄清楚是什么问题。 HTML：

<!DOCTYPE html>
<html>
<script type="text/javascript" src="expenses.js"></script>
  <head>
    <meta charset = "utf-8" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   <title>Expenses</title>
</head>
<body>
 <div class="dataEntry">
   <input type="date" id="inputdate" name = "date" value=""></input>
   <input type="text" id = "inputstore" name = "store" value="Store"></input>
   <input type="text" id = "inputcategory" name = "category" value="Category"> </input>
   <input type="text" id = "inputitem" name = "item" value="Item"></input>
   <input type="text" id = "inputamount" name = "amount" value="Amount"></input>
   <button type="button" class="btn btn-primary" name="button" \
      onclick="newExpense(inputdate,inputstore,inputcategory,inputitem,inputamount)"> Enter</button>

   <table id="dataTable">
     <tr>
       <th>Date</th>
       <th>Store</th>
       <th>Category</th>
       <th>Item</th>
       <th>Amount</th>
     </tr>
   </table>
 </div>

`

和Javascript：

"use strict"
class Expense {
  constructor(d,s,c,i,a){
    self.date = d;
    self.store = s;
    self.cat = c;
    self.item = i;
    self.amount = parseFloat(a);
  }

  buildTable() {
    let row = table.createElement('tr');
    for (let cell of [self.date, self.store, self.cat, self.item,     self.amount]){
    let el = tr.createElement('td');
    row.appendChild(el);
    }
  }
}

class ExpenseDB {
  constructor() {
    this.array = [];
  }

  static newExpense(date, store, cat, item, amount) {
    let expense = new Expense(date,store,cat,item,amount);
    return expense;
  }
}

Answer 1

我认为以下问题应解决问题：

＆＃13;

"use strict"
class Expense {
  constructor(d,s,c,i,a){
    self.date = d;
    self.store = s;
    self.cat = c;
    self.item = i;
    self.amount = parseFloat(a);
  }

  buildTable() {
    let row = document.createElement('tr');
    for (let cell of [self.date, self.store, self.cat, self.item,     self.amount]){
    let el = document.createElement('td');
    var t = document.createTextNode(cell);
    el.appendChild(t);
    row.appendChild(el);
    }
    return row;
  }
}

class ExpenseDB {
  constructor() {
    this.array = [];
  }

  static newExpense(date, store, cat, item, amount) {
    let expense = new Expense(date,store,cat,item,amount);
    return expense;
  }
}

＆＃13;

<!DOCTYPE html>
<html>

  <head>
    <meta charset = "utf-8" />
    <!-- <script type="text/javascript" src="expenses.js"></script> -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap /3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script>
      function createNewRow() {
        let inputdate = document.getElementById('inputdate').value;
        let inputstore = document.getElementById('inputstore').value;
        let inputcategory = document.getElementById('inputcategory').value;
        let inputitem = document.getElementById('inputitem').value;
        let inputamount = document.getElementById('inputamount').value;
        let expense = ExpenseDB.newExpense(inputdate,inputstore,inputcategory,inputitem,inputamount)
        
        let table = document.getElementById('dataTable');
        table.appendChild(expense.buildTable());
      }
    </script>
   <title>Expenses</title>
</head>
<body>
 <div class="dataEntry">
   <input type="date" id="inputdate" name = "date" value=""></input>
   <input type="text" id = "inputstore" name = "store" value="Store"></input>
   <input type="text" id = "inputcategory" name = "category" value="Category"> </input>
   <input type="text" id = "inputitem" name = "item" value="Item"></input>
   <input type="text" id = "inputamount" name = "amount" value="Amount"></input>
   <button type="button" class="btn btn-primary" name="button" \
      onclick="createNewRow();"> Enter</button>

   <table id="dataTable">
     <tr>
       <th>Date</th>
       <th>Store</th>
       <th>Category</th>
       <th>Item</th>
       <th>Amount</th>
     </tr>
   </table>
 </div>
 </body>
 </html>

＆＃13;

referenceError：<function>未定义

1 个答案: