JavaScript函数不工作

Question

这是我的HTML

<form> 
    <p> 
     Enter the total stock value: <input id="total" type="number"onkeyup="calculate()"> 
    </p> 
    <p> 
     Enter the agreed commision rate:<input id="commision" type="number"> 
    </p> 
    <p> 
     <input id="calculate" type="number" readonly="readonly" placeholder="Result"> 
    </p> 
</form> 

，这是我的Javascript现在

calculate = function() { 
    var total = document.getElementById('total').value; 
    var commision = document.getElementById('commision').value; 
    document.getElementById('calculate').value = parseFloat(total)/100 * parseFloat(commision); 
} 

$(document).keyup(function(e) {  
    if(e.keyCode== 27) { 
     $("form")[0].reset(); 
    } 
}); 

，如果我的表格不裹在一个表单标签我的计算函数完美地工作，但是当它在一个表单标签中时，我会在控制台中出现一个错误，提示“Uncaught TypeError：calculate不是函数”。 我试过没有窗体标签，但然后reset（）函数不工作..

有没有人有任何想法如何解决这个问题？

Answer 1

这是因为你有一个元素与ID计算，元素的ID被复制为窗体对象的属性（也窗口属性），因此在你的情况下calculate是指在表单的范围内使用DOM元素它已经超越了功能

<input id="txtcalculate" type="number" readonly="readonly" placeholder="Result">