时间戳

首页 > 解决方案 > 未捕获的 TypeError：renderIncomes.overIncome 不是 HTMLInputElement 中的函数。

javascript - 未捕获的 TypeError：renderIncomes.overIncome 不是 HTMLInputElement 中的函数。

问题描述

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

当我检查复选框输入时，我希望浏览器上的列表（数组）发生变化。但是，当我选中复选框时，它会说：“未捕获的 TypeError：renderIncomes.overIncome 不是 HTMLInputElement 的函数。” 在我的 html 文件中，我将输入设置为复选框类型。在我的 javascript 文件中，我添加了一个事件监听器以在我选中复选框时进行更改。只有收入大于 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>

标签： javascripthtml

解决方案

您正在将对象 renderIncomes 的属性 overIncome 分配给值，因此行后boolean没有功能overIncome()

 renderIncomes.overIncome = e.target.checked

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

推荐阅读