Question

我目前正在学校学习Javascript，所以我的代码看起来像是初学者的编码风格。

当我选中复选框输入时，我希望浏览器上的列表（数组）发生变化。但是，当我确实选中复选框时，它将说：“未捕获的TypeError：renderIncomes.overIncome不是HTMLInputElement的函数。” 在我的html文件中，我将输入设置为复选框类型。并且在我的javascript文件中，我添加了一个eventlistener来更改复选框。仅当收入大于300时，浏览器上的列表才会更改。这是html和javascript文件的代码。

let user = {
  firstName: 'Zoraida',
  lastName: 'Rodriguez',
  accountType: 'Personal'
}

let renderUser = {
  renderName: function() {
    const h1 = document.createElement('h1')
    h1.textContent = `Welcome ${user.firstName}!`
    document.querySelector('#user').appendChild(h1)
  }
}
renderUser.renderName()

let incomes = [{
  type: 'monthly wages',
  date: '09/01/2018',
  income: 900,
}, {
  type: 'yardwork',
  date: '09/07/2018',
  income: 100,
}, {
  type: 'eBay',
  date: '09/14/2018',
  income: 250,
}]

let renderIncomes = {
  renderList: function() {
    document.querySelector('#incomes').innerHTML = ''

    const h3 = document.createElement('h3')
    h3.textContent = `You have a list of ${incomes.length} incomes.`
    document.querySelector('#incomes').appendChild(h3)

    incomes.forEach(function(each) {
      const p = document.createElement('p')
      p.textContent = `On ${each.date}, you received $${each.income} from ${each.type}.`
      document.querySelector('#incomes').appendChild(p)
    })
  },
  totalIncome: function() {
    document.querySelector('#totalIncome').innerHTML = ''

    let totalIncome = 0
    incomes.forEach(function(income) {
      totalIncome += income.income
    })
    const h2 = document.createElement('h2')
    h2.textContent = `Total income: $${totalIncome}`
    document.querySelector('#totalIncome').appendChild(h2)
  },
  overIncome: function() {
    incomes.filter(function(incomeResults) {
      return incomeResults.income > 300
    })
  }
}

renderIncomes.renderList()
renderIncomes.totalIncome()
renderIncomes.overIncome()

document.querySelector('#new-incomes').addEventListener('submit', function(e) {
  e.preventDefault()
  incomes.push({
    type: e.target.elements.typeOfIncome.value,
    date: e.target.elements.date.value,
    income: parseInt(e.target.elements.income.value)
  })

  renderIncomes.renderList()
  renderIncomes.totalIncome()
  e.target.elements.typeOfIncome.value = ''
  e.target.elements.date.value = ''
  e.target.elements.income.value = ''
})

document.querySelector('#filterincomes').addEventListener('change', function(e) {
  renderIncomes.overIncome = e.target.checked
  renderIncomes.overIncome()
})

<body>
  <div id="user" class="center"></div>
  <hr>
  <br>

  <div id="totalIncome" class="center"></div>
  <div id="incomes" class="center"></div>

  <form id="new-incomes" class="center">
    <label>
            Date: <input type="text" placeholder="MM/DD/YYYY" name="date">
        </label>
    <label>
            Type: <input type="text" placeholder="From Where" name="typeOfIncome">
        </label>
    <label>
            Income: <input type="text" placeholder="Type New Income" name="income">
        </label>

    <button>Submit</button>
  </form>

  <label>
        <input id="filterincomes" type="checkbox">Check here for incomes over $300
    </label>



  <script src="test.js"></script>
</body>

Answer 1

您正在将对象renderIncomes的属性overIncome分配给boolean值因此，在行

后没有函数overIncome()

 renderIncomes.overIncome = e.target.checked

删除行，您的代码将正常工作

Answer 2

在您的addEventListener中，您分配了value to a object

建议更改以下代码，请注意以下解决方案将解决您的 Uncaught TypeError 错误

document.querySelector('#filterincomes').addEventListener('change', function(e) {
  //renderIncomes.overIncome = e.target.checked
  renderIncomes.overIncome()
})

未捕获的TypeError：renderIncomes.overIncome不是HTMLInputElement上的函数。<anonymous>

2 个答案: