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

Question

I'm just beginning to learn javascript, so this is probably something very easy that I am overlooking. 我刚刚开始学习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>

It seems to go to the function correctly, but I can't actually change the output to display anything. 它似乎正确进入了该功能，但是我实际上无法更改输出以显示任何内容。

Answer 1

As you are new to javascript I would like to suggest another method of performing calculations. 由于您是javascript新手，所以我想建议另一种执行计算的方法。

This method will be more readable and more flexible. 此方法将更具可读性和灵活性。 As it stands, if there is a change to your formula you will have to change it in multiple locations. 就目前而言，如果您的公式发生更改，则必须在多个位置进行更改。

I suggest creating id 's for each of your input fields. 我建议为每个input字段创建id 。

In your javascript function I suggest creating variables with meaningful names. 在您的javascript函数中，建议您创建具有有意义名称的变量。 Finally you will need to use parseInt() as I believe that the value of input fields on a form are in string format. 最后，您将需要使用parseInt()因为我认为form上input字段的value是string格式。

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

HTML: 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: 使用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

try replacing 尝试更换

Monthlypayment.value=balance.value;

with 同

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

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

It would also be good to read up on scope in javascript: 阅读javascript中的作用域也将是一件好事：

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

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

Answer 3

you can simply calculate in your form oninput as follows: 您可以简单地以oninput形式计算如下：

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

Remove the form tag from Output as it is already inside the Form : 从Output移除form标签，因为它已经在Form内部：

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

You can also change your submit button as follows: 您还可以如下更改提交按钮：

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

Check the following reference for more details: 检查以下参考以获取更多详细信息：

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

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

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-11-21 04:39:17

解决方案2
0 2013-11-21 04:03:46

解决方案3
0 2013-11-21 04:15:42

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

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-11-21 04:39:17

解决方案2 0 2013-11-21 04:03:46

解决方案3 0 2013-11-21 04:15:42

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

解决方案1
1 已采纳 2013-11-21 04:39:17

解决方案2
0 2013-11-21 04:03:46

解决方案3
0 2013-11-21 04:15:42