javascript - 无法获取JavaScript来计算字段

我尝试了几种不同的方法，我觉得这是最接近工作的方法，但是却没有用。我希望有人可以指出并解释我做错了什么。我认为parseFloat可能是我的问题，但我不确定。

window.onload = function () {
    var purchPrice = document.getElementById('purchPrice');
    var warrMile = document.getElementById('warrMile');
    var currentMile = document.getElementById('currentMile');
    var purchMile = document.getElementById('purchMile');
    var mileAdjPerct = 0;
    var mileAdjEach = 0;
    var mileAdjTotal = 0;
}

function warrUpdate() {
    var warrPerct = (parseFloat(currentMile.value) - parseFloat(purchMile.value)) / parseFloat(warrMile.value);
    var warrEach = parseFloat(purchPrice.value) * warrPerct;
    var warrTotal = warrEach * 4;

    parseFloat(document.getElementById('mileAdjPerct').value = warrPerct);
    parseFloat(document.getElementById('mileAdjEach').value = warrEach);
    parseFloat(document.getElementById('mileAdjTotal').value = warrTotal);
}

这是一个小提琴：http://jsfiddle.net/hmhxybLL/

最佳答案

您的代码有很多问题，主要的问题是要处理的变量在onload回调函数中局部作用域。您必须使变量成为全局变量，但这不是一个好主意，因此在避免全局变量的众多工作中，其中一项是将所有代码封装在warranty对象中：

<fieldset id="milewarr" onSubmit="milewarr()">
    <p>Purchase Price Per Tire: <input type="number" name="purchPrice" id="purchPrice" onChange="warranty.update();" /></p>
    <p>Mileage Warranty: <input type="number" name="warrMile" id="warrMile" onChange="warranty.update();" /></p>
    <p>Current Vehicle Mileage: <input type="number" name="currentMile" id="currentMile" onChange="warranty.update();" /></p>
    <p>Mileage at Purchase: <input type="number" name="purchMile" id="purchMile" onChange="warranty.update();" /></p>
    <br />
    <p>Adjustment Percentage: <input type="number" id="mileAdjPerct" readonly /></p>
    <p>Adjustment Amount Each Tire: <input type="number" id="mileAdjEach" readonly /></p>
    <p>Adjustment Discount Total: <input type="number" id="mileAdjTotal" readonly /></p>
</fieldset>

JS：

var warranty = (function() {
  var purchPrice, warrMile, currentMile, purchMile, mileAdjPerct, mileAdjEach, mileAdjTotal;

  return {
     init: function() {
        purchPrice = document.getElementById('purchPrice');
        warrMile = document.getElementById('warrMile');
        currentMile = document.getElementById('currentMile');
        purchMile = document.getElementById('purchMile');
        mileAdjPerct = document.getElementById('mileAdjPerct');
        mileAdjEach = document.getElementById('mileAdjEach');
        mileAdjTotal = document.getElementById('mileAdjTotal');
     },
     update: function() {
        var warrPerct = (currentMile.value - purchMile.value) / warrMile.value; // caution: you should check for a divide by 0 first
        var warrEach = purchPrice.value * warrPerct;
        var warrTotal = warrEach * 4;
        mileAdjPerct.value = warrPerct;
        mileAdjEach.value = warrEach;
        mileAdjTotal.value = warrTotal;
     }
  };
})();

window.onload = warranty.init;

http://jsfiddle.net/sebnukem/hmhxybLL/10/