在表單標簽中調用時，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();
    }
});

現在，如果我的表單沒有包裝在表單標簽中，則我的Calculate函數可以正常工作，但是當它在表單標簽中時，我會在控制台中收到一條錯誤消息，提示“未捕獲的TypeError：calculate不是函數”。 我試過沒有form標簽，但是reset（）函數不起作用。

有誰知道如何解決這個問題？

Answer 1

那是因為你有ID計算元素，元素的IDS被復制的形式，對象的屬性（也窗口屬性），所以你的情況calculate已經覆蓋了形式的范圍內使用時，指的是DOM元素功能

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