无法让 javascript 计算字段答案

【问题标题】：Having trouble getting javascript to calculate fields无法让 javascript 计算字段
【发布时间】：2015-04-27 19:55:09
【问题描述】：

我尝试了几种不同的方法，我觉得这是最接近工作的方法，但它不起作用。我希望有人能指出并解释我做错了什么。我认为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 处理程序的本地变量，因此您无法从warrUpdate 访问它们。
同时从最后的语句中移除 parsefloats。无需解析值赋值的结果。此外，jsFiddle 需要从左侧的“on load”事件中更改为“in head”jsfiddle.net/otLdc9dL/1

标签： javascript forms input field

【解决方案1】：

您的代码有很多问题，主要是您要操作的变量在 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/

【讨论】：