JavaScript数学函数不起作用并返回Nan答案

【问题标题】：JavaScript math function not working and returning NanJavaScript数学函数不起作用并返回Nan
【发布时间】：2019-03-17 18:57:28
【问题描述】：

我创建了一个不起作用的数学函数。当我从另一个函数调用该函数时，它返回 NaN，而不是数字。

当我声明变量时，'calculate' 函数内的代码块在函数外部可以正常工作，但是当我将其作为函数调用时，这些应该作为参数添加。

谁能告诉我为什么“计算”功能不起作用？

function gatherInfo() {
    var clientAge = document.getElementById('clientAge').value;
    var propertyValue = document.getElementById('propertyValue').value;
    var OSmortgage = document.getElementById('OSmortgage').value;
    calculate(clientAge, propertyValue, OSmortgage);
}

var subButton = document.getElementById('subButton');
subButton.addEventListener('click', gatherInfo, false);


function calculate(clientAge, propertyValue, OSmortgage) {
    var ageArray = [];
    var i;
    for (i = 55; i < 96; i++) {
        ageArray.push(i);
    }
    var percentArray = [25.6, 26.6, 27.6, 28.6, 29.6, 32.5, 33.5, 34.5, 35.5, 36.5, 37.5, 38.5, 39.5, 40.5, 41.5, 42.5, 43.2, 44.4, 45.6, 46.8, 48, 49.2, 50.4, 51, 51.5, 52, 52.5, 53, 53.5, 54, 54, 54, 54, 54, 54, 55, 55, 55, 55, 55, 55];

    var ageIndex = ageArray.indexOf(clientAge);
    var percentage = percentArray[ageIndex];
    var amount = ((propertyValue - OSmortgage) / 100) * percentage;
    result(amount, clientAge);
}


function result(amount, clientAge) {

    var result = document.getElementById('result');
    if (clientAge < 55) {
        result.textContent = 'You do not qualify for equity release.';
    } else {
        result.textContent = 'You could release £' + amount + ' of your property\'s value.';
    }
}

我的 HTML 是：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Equity Release Calculator</title>
</head>

<body>
    <h1>Equity Release Calculator</h1>

    <form id="form" method="get">

        <p>Age
        <input type="number" id="clientAge" required="required"> 
        </p>

        <p>Property value
        <input type="number" id="propertyValue" required="required">    
        </p>       

        <p>Outstanding mortgage amount
        <input type="number" id="OSmortgage" required="required">    
        </p>

        <p>Submit
        <input type="button" id="subButton" value="Get my quote">    
        </p>       

    </form>


    <p id="result"></p>

</body>
<script src="script.js" type="text/javascript"></script>   
</html>

【问题讨论】：

您的函数对本地变量进行操作，它们不返回任何值。
干杯，我已经通过参数将值/变量传递给下一个函数。
一个可能的问题是元素的.value 属性总是给你字符串，而不是数字，这可能会导致问题。
所以您的ageArray 包含数字，因此.indexOf() 永远不会找到您从DOM 元素中获得的“clientAge”值。因此ageIndex 将始终为-1，percentage 将始终为undefined，amount 将始终为NaN。
这可以解释，干杯我将尝试将字符串转换为数字

标签： javascript function math nan

【解决方案1】：

当您将代码放入计算函数时，它会将这些变量的范围更改为计算函数本身的本地变量，这意味着您无法在函数之外访问它们。

您需要在此函数中添加一个“返回”才能访问输出。

例如

function calculate(clientAge, propertyValue, OSmortgage) {
    var ageArray = [];
    var i;
    for (i = 55; i < 96; i++) {
        ageArray.push(i);
    }
    var percentArray = [25.6, 26.6, 27.6, 28.6, 29.6, 32.5, 33.5, 34.5, 35.5, 36.5, 37.5, 38.5, 39.5, 40.5, 41.5, 42.5, 43.2, 44.4, 45.6, 46.8, 48, 49.2, 50.4, 51, 51.5, 52, 52.5, 53, 53.5, 54, 54, 54, 54, 54, 54, 55, 55, 55, 55, 55, 55];

    var ageIndex = ageArray.indexOf(clientAge);
    var percentage = percentArray[ageIndex];
    var amount = ((propertyValue - OSmortgage) / 100) * percentage;

    return amount;
}

【讨论】：

[因为 OP 编辑了原始问题，] 这个答案似乎不是问题，因为result() 修改了 DOM。这些值从未在调用函数中实际使用。

【解决方案2】：

问题是解析，我已更正您的代码，所以请检查并告诉我。希望它对你有用:)

var ageIndex = ageArray.indexOf(parseFloat(clientAge)); var 百分比 = percentArray[parseFloat(ageIndex)]; var amount = ((parseFloat(propertyValue) - parseFloat(OSmortgage)) / 100) * parseFloat(percentage);

function gatherInfo() {
debugger
    var clientAge = document.getElementById('clientAge').value;
    var propertyValue = document.getElementById('propertyValue').value;
    var OSmortgage = document.getElementById('OSmortgage').value;
    calculate(clientAge, propertyValue, OSmortgage);
}

var subButton = document.getElementById('subButton');
subButton.addEventListener('click', gatherInfo, false);


function calculate(clientAge, propertyValue, OSmortgage) {
    var ageArray = [];
    var i;
    for (i = 55; i < 96; i++) {
        ageArray.push(i);
    }
    var percentArray = [25.6, 26.6, 27.6, 28.6, 29.6, 32.5, 33.5, 34.5, 35.5, 36.5, 37.5, 38.5, 39.5, 40.5, 41.5, 42.5, 43.2, 44.4, 45.6, 46.8, 48, 49.2, 50.4, 51, 51.5, 52, 52.5, 53, 53.5, 54, 54, 54, 54, 54, 54, 55, 55, 55, 55, 55, 55];

    var ageIndex = ageArray.indexOf(parseFloat(clientAge));
    var percentage = percentArray[parseFloat(ageIndex)];
    var amount = ((parseFloat(propertyValue) - parseFloat(OSmortgage)) / 100) * parseFloat(percentage);
    alert("amount " + amount);
}


function result(amount, clientAge) {

    var result = document.getElementById('result');
    if (clientAge < 55) {
        result.textContent = 'You do not qualify for equity release.';
    } else {
        result.textContent = 'You could release £' + amount + ' of your property\'s value.';
    }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Equity Release Calculator</h1>

    <form id="form" method="get">

        <p>Age
        <input type="number" id="clientAge" required="required"> 
        </p>

        <p>Property value
        <input type="number" id="propertyValue" required="required">    
        </p>       

        <p>Outstanding mortgage amount
        <input type="number" id="OSmortgage" required="required">    
        </p>

        <p>Submit
        <input type="button" id="subButton" value="Get my quote">    
        </p>       

    </form>


    <p id="result"></p>

【讨论】：

请说明拒绝投票的原因，以便我可以纠正我的错误并做出更具体的回答。
Cheers Dhaval，我设法通过在 document.getelementbyid 之前添加一个 + 来修复它...... .value 将条目作为字符串而不是数字拉入
表示我的答案不是您的解决方案，对吗？那么你可以撤消接受我的回答:)
哦抱歉，这是我第一次来这里:)
没问题。您应该始终只接受对您有帮助或解决问题的答案，这样它也可以引导其他人

【解决方案3】：

对所有变量使用 parseint 或 parsefloat：

var ageIndex = ageArray.indexOf(parseFloat(clientAge)); 
var percentage = percentArray[parseFloat(ageIndex)]; 
var amount = ((parseFloat(propertyValue) - parseFloat(OSmortgage)) / 100) * parseFloat(percentage);

【讨论】：