Ich fange gerade erst an, Javascript zu lernen, daher ist dies wahrscheinlich etwas sehr Einfaches, das ich übersehen habe.

<!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>

Es scheint richtig zur Funktion zu gehen, aber ich kann die Ausgabe nicht ändern, um etwas anzuzeigen.

0
the1gofer 21 Nov. 2013 im 07:45

3 Antworten

Beste Antwort

Da Sie mit Javascript noch nicht vertraut sind, möchte ich Ihnen eine andere Methode zur Durchführung von Berechnungen vorschlagen.

Diese Methode ist lesbarer und flexibler. Wenn sich Ihre Formel ändert, müssen Sie sie an mehreren Stellen ändern.

Ich schlage vor, id für jedes Ihrer input Felder zu erstellen.

In Ihrer Javascript-Funktion schlage ich vor, Variablen mit aussagekräftigen Namen zu erstellen. Schließlich müssen Sie parseInt() verwenden, da ich glaube, dass die value von input Feldern auf einem form im string Format vorliegen.

JS-Geigenbeispiel: 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);
}
1
Mal 21 Nov. 2013 im 04:39

Versuchen Sie es zu ersetzen

Monthlypayment.value=balance.value;

Mit

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

Referenz: http://www.ryerson.ca/JavaScript/lectures/forms/ textinput.html

Es wäre auch gut, den Umfang in Javascript zu lesen:

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

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

0
Community 23 Mai 2017 im 12:15

Sie können in Ihrem Formular oninput einfach wie folgt berechnen:

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

Entfernen Sie das Formular-Tag aus Output, da es sich bereits in Form befindet:

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

Sie können Ihre Senden-Schaltfläche auch wie folgt ändern:

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

Überprüfen Sie die folgende Referenz für weitere Details:

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

0
Ahsan Shah 21 Nov. 2013 im 04:15