在表单标记中调用时,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();
    }
});

现在,如果我的表单没有包装在表单标签中,我的计算功能可以正常工作,但是当它在表单标签中时,我会在控制台中收到错误,说"未捕获的TypeError:计算不是函数".我尝试没有form标签,但然后reset()函数不起作用..

有谁知道如何解决这个问题？

Answer 1

这是因为你有一个具有id计算的元素,元素的id被复制为表单对象的属性(也被复制到窗口属性)所以在你的情况下calculate是指在覆盖函数的表单范围内使用时的dom元素

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