我的javascript的一部分工作，另一部分不工作

我有一个calculate函数和一个canvas元素，我不知道为什么，但是canvas部分工作，而calculate函数不工作。如果我从我的文本编辑器中启动这个函数，那么calculate函数工作，而canvas部分不工作

这真的让我很困惑，我想这可能和订购有关，也许我真的不确定，有人能解释一下这些结果吗

这是计算函数

function calculate(){
var amount=document.getElementById("amount");
var apr=document.getElementById("apr");
var years=document.getElementById("years");
var payment=document.getElementById("payment");
var total=document.getElementById("total");
var totalintrest=document.getElementById("totalintrest");

var principal= parseFloat(amount.value);
var intrest= parseFloat(apr.value)/100/12;
var payments= parseFloat(years.value)*12;

var x= Math.pow(1+intrest,payments);
var monthly= (principal*x*intrest)/(x-1);

if(isFinite){
    payment.innerHTML=monthly.toFixed(2);
    total.innerHTML=(monthly*payments).toFixed(2);
    totalintrest.innerHTML=((monthly*payments)-principal).toFixed(2);

}
else{
    payment.innerHTML="";
    total.innerHTML="";
    totalintrest.innerHTML="";
    }
}

这是画布部分的开始，其余部分在小提琴中

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

---

我在函数中看到的唯一问题是使用了一个未定义的变量

isFinite

。如果您引用的是JavaScript函数，那么您忘记了指定数值参数

也许你的意思是

if (isFinite(monthly)) { } else { }

---

问题是函数calculate未定义。我对您的代码进行了一些调整，实际上将js代码分为两部分：

function calculate() {}

可以放置在html的头部，画布的绘制可以发生在onLoad事件中。还要考虑@campari关于isFinite的建议，因为这可能是未定义的。我把它换成了

if(true)

---

我能问一下为什么它没有定义吗？是不是因为它不在脑袋里？如果是这样的话，我怎么知道什么类型的js应该在头部，什么类型的js应该在身体中？你不需要立即的功能可以放在头部。尽管如此，我还是建议您将所有的js或放在head部分，但放在不同的逻辑函数或单独的js文件中。感谢您花时间解释这一点！