Question

我刚刚开始学习javascript，所以这可能是我很容易忽视的东西。

<!DOCTYPE html>
<html>
<head>
<script>
    function calculatePayment()
    {
        //formula: M = P * ( J / (1 - (1 + J) ** -N))
        Monthlypayment.value=balance.value;

    }
</script>
</head>

<body>

<form onsubmit="return false" name="MortgageCalculator" oninput="calculatePayment()">
<fieldset>
    <legend>Loan Basics</legend>
    <div>
        <label for="balance">Beggining Balance: </label><input type="number" name="balance" min="10000" max="5000000" step="10000" size="7" value="150000" required>
    </div>
    <div>
        <label for="rate">Interest Rate (%): </label><input type="number" name="rate" min="0" max="99" step=".25" size="4" value="4.5" required>
    </div>
    <div>
        <label for="term">Term (months): </lable><input type="number" name="term" min="6" max="360" step="1" size="3" value="360" required>
    </div>
    <div>
        <input type="submit" value="Submit" onclick="calculatePayment()">
    </div>
</fieldset>

<div class="calculations">
    <label for="MonthlyPayment">Monthly Payment: </label><output name="MonthlyPayment" for="balance rate term" form="MortgageCalculator" onforminput="Monthlypayment.value=balance.value"></output>
</div>
</form>



</body>
</html>

它似乎正确地转到了函数，但我实际上无法更改输出以显示任何内容。

Answer 1

由于您不熟悉javascript，我想建议另一种执行计算的方法。

此方法更具可读性和灵活性。目前，如果您的公式发生变化，您将需要在多个位置进行更改。

我建议为每个id字段创建input。

在你的javascript函数中，我建议使用有意义的名称创建变量。最后，您需要使用parseInt()因为我认为value上input个form字段的格式为string。

JS小提琴示例： http://jsfiddle.net/9Y9L3/

<强> HTML：

<label>Value 1</label>
<input type="number" id="value1"></input>

<label>Value 2</label>
<input type="number" id="value2"></input> <br>  

<button type="button" onclick="doMaths();">Calculate</button><br>

<label>Result</label>
<input type="number" id="result"></input>

<强>使用Javascript：

function doMaths() {
var val1 = document.getElementById("value1");
var val2 = document.getElementById("value2");
var result = document.getElementById("result");

result.value = parseInt(val1.value) + parseInt(val2.value);
}

Answer 2

尝试替换

Monthlypayment.value=balance.value;

与

document.MortgageCalculator.Monthlypayment.value=document.MortgageCalculator.balance.value;

参考：http://www.ryerson.ca/JavaScript/lectures/forms/textinput.html

在javascript中阅读范围也很好：

https://stackoverflow.com/a/8423447/2896173

http://coding.smashingmagazine.com/2009/08/01/what-you-need-to-know-about-javascript-scope/

Answer 3

您只需按照以下格式oninput计算：

<form onsubmit="return false;" name="MortgageCalculator" oninput="MonthlyPayment.value = balance.value">

从Output中删除表单标记，因为它已经在Form：

中

<output name="MonthlyPayment" for="balance rate term">0</output>

您还可以按如下方式更改提交按钮：

<input type="submit" value="Submit" onclick="MonthlyPayment.value = balance.value;">

查看以下参考资料以获取更多详细信息：

http://html5doctor.com/the-output-element/

javascript，html5表单。为什么这不起作用？

3 个答案: