Uncaught TypeError: Cannot read property 'toFixed' of undefined

Question

我知道其他人也曾抛出过此错误，但我认为我遇到了某种语法问题，导致我遇到这种情况。如果你能找到它，我将不胜感激。我是 JavaScript 的新手，盯着这个简单的程序看了一个小时。

这是 JavaScript：

"use strict";
var $ = function(id) {
    return document.getElementById(id);
};

var calculateFV = function(investmentAmount, interestRate, yearsAmount) {
    var futureValue;

    //get the future value after the amount of years entered
    for (var i = 1; i <= yearsAmount; i++ ) {
        var interest = futureValue * interestRate / 100;
        futureValue = futureValue + interest;
    }

    return futureValue.toFixed(2);
};

var processEntries = function(investmentAmount, interestRate, yearsAmount) {
    var investment = investmentAmount;
    var interest = interestRate;
    var years = yearsAmount;

    var futureValue = calculateFV(investment, interest, years);
    $("calculate").value = futureValue;
};

window.onload = function() {
  $("calculate").onclick = processEntries;  
};

这里是 HTML:

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Future Value Calculator</title>
 <link rel="stylesheet" href="future_value.css">
 <script src="future_value.js"></script>
</head>

<body>
 <main>
     <h1>Future Value Calculator</h1>

     <label for="investment">Total Investment:</label>
     <input type="text" id="investment"><br>

     <label for="rate">Annual Interest Rate:</label>
     <input type="text" id="rate">%<br>

     <label for="years">Number of Years:</label>
     <input type="text" id="years"><br>

     <label for="future_value">Future Value:</label>
     <input type="text" id="future_value" disabled><br>

     <label>&nbsp;</label>
     <input type="button" id="calculate" value="Calculate"><br>      
 </main>
</body>
</html>

非常感谢！

Answer 1

futureValue 只有在 i <= yearsAmount 循环至少执行一次的情况下才会被赋予一个值。但是，它甚至不会执行一次：这是因为 yearsAmount 将始终未定义。为什么？让我们看看这个函数是如何被调用的：

var futureValue = calculateFV(investment, interest, years);

这是调用calculateFV的地方，所以years必须是undefined。 years 只是来自您的 processEntries header:

的参数 yearsAmount

var processEntries = function(investmentAmount, interestRate, yearsAmount) {

所以我们知道 processEntries 被调用了一个未定义的第三个参数。

这一行是罪魁祸首：

$("calculate").onclick = processEntries;

元素的 onclick 事件仅使用一个参数调用：事件 object。代码不知道您希望它传递标记为 investment、interest 和 years 的输入框的值。因此，您得到的不是三个数字，而是一个事件 object 和两个 undefined 值。相反，您需要自己 select 这些元素并在 processEntries 中获取它们的值。

看起来像这样：

var processEntries = function(event) { //notice only the event will be given
    //text box values will be strings, so convert to number with Number()
    var investment = Number($("investment").value);
    var interest = Number($("rate").value);
    var years = Number($("years").value);

    var futureValue = calculateFV(investment, interest, years);
    $("calculate").value = futureValue;
};

Answer 2

您需要从其他方式获取 processEntries() 参数。这样，您将直接收到的唯一参数就是事件对象。在 processEntries 函数中，尝试做这样的事情：

var processEntries = function() {
    var investment = $('investment').value;
    var interest = $('rate').value;
    var years = $('years').value;

    var futureValue = calculateFV(investment, interest, years);
    $("calculate").value = futureValue;
};

可能您需要在获取值后正确设置文本格式，请尝试 consol.log 它们，然后再调用最后一个函数进行调试。

Answer 3

在某些情况下我们直接在html中绑定数据时，有可能加载需要一些时间，所以我们可能会出现上述错误。

在我的例子中，我使用了 "?" 运算符

例如：- customer.price?.toFixed(2)

Answer 4

TypeError: Cannot read property 'toFixed' of undefined

下面的代码修复了上面的错误。

var test = 12.520;
console.log(Number(test).toFixed(2));

Uncaught TypeError: Cannot read property 'toFixed' of undefined

Uncaught TypeError: Cannot read property 'toFixed' of undefined

javascript

onclick

syntax-error

tofixed