1
私は学習の一部としてコーディングを学び、ローン/モーゲージの電卓を作成し始めました。 Highchartsを利用して結果を描いていますが、私が望むように動作させることはできません。HTMLフォームの値変更でハイチャートのデータを動的に更新
理想的には、計算された新しい値（つまり、「月額払い戻し」と「月間金利のみ」）で円グラフを動的に更新したいです。
これまでのところ、「計算」ボタンをクリックして再描画することしかできませんでしたが、ボタンを少なくとも2回クリックすると正しい新しい値で更新されます。
例：https://codepen.io/sonofauley/pen/rwNLom
<body onload="calculate();">
<form method="POST" name="calc" onsubmit="calculate(); return false;">
<label>Amount</label>
<input type="textbox" id="loan" value="100000"><br>
<label>Years</label>
<input type="textbox" id="years" value="25"><br>
<label>Rate (%)</label>
<input type="textbox" id="rate" value="2.50" onkeyup="calculate"><br>
<input type="submit" value="Calculate" id="btn"><br>
<label>Monthly Repayment</label>
<input type="textbox" id="monthlyRepayment"><br>
<label>Monthly Interest Only</label>
<input type="textbox" id="interest"><br>
<label>Monthly Capital Repayment</label>
<input type="textbox" id="capitalRepayment">
<label>Total Interest</label>
<input type="textbox" id="totalInterest"><br>
</form>
<div id="container" style="height: 300px"></div>
</body>
//the below script is in its own js file "cacl.js"
$(document).on("keyup", calculate());
function calculate() {
var p = document.querySelector("#loan").value;
var years = document.querySelector("#years").value;
var rate = document.querySelector("#rate").value;
var r = rate/100/12;
var n = years * 12;
var m1 = r * Math.pow(1 + r, n);
var m2 = Math.pow(1 + r, n) - 1;
var m = (p * (m1/m2)).toFixed(2);
var I = ((p - n)/m).toFixed(2);
var ti = m * n - p;
var mr = (m - I).toFixed(2);
document.querySelector("#monthlyRepayment").value = m;
document.querySelector("#interest").value = I;
document.querySelector("#totalInterest").value = ti;
document.querySelector("#capitalRepayment").value = mr;
}
//the below script is in a separate js file "chart.js"
$(function() {
$('#btn').click(function(){
var val1,
val2,
options;
val1 = parseFloat($('input[id=monthlyRepayment]').val());
val2 = parseFloat($('input[id=capitalRepayment]').val());
options = {
series: [{
type: 'pie',
name: 'Browser share',
data: [val1,val2]
}]
};
$('#container').highcharts(options);
});
});
それは素晴らしいです、ありがとう –