JavaScript表单适用于Chrome，但不适用于Firefox

我刚刚完成了一项任务，该任务需要我构建一个总计订单明细等的小表单。它在Chrome中运行得非常好，但我在Firefox中运行测试（如评估者将会使用它）并且它根本无法工作。任何提示或解决方案，为什么会被赞赏。由于JavaScript表单适用于Chrome，但不适用于Firefox

的JavaScript

function list(theform){ 

    var mem = theform.elements["mem"].value; 
    var cov = theform.elements["cover"].value; 
    var cha = theform.elements["charger"].value; 
    var scr = theform.elements["screen"].value; 
    var del = theform.elements["delivery"].value; 
    var qty = theform.elements["qty"].value; 


    acc = (parseInt(mem) + parseInt(cov) + parseInt(cha) + parseFloat(scr) + parseInt(del)) * qty; 

    total.value = "$" + Math.round(acc*100)/100; 
    return false; 
}

HTML

<form id="accform" onsubmit="return list(this)"> 

     <label class="third column" for="memory">Memory</label> 
     <label class="third column" for="case">Case</label> 
     <label class="third column" for="memory">Charger</label> 

     <select class="third column" id="mem" name="mem"> 
      <option value="0">2GB : No charge</option> 
      <option value="5">4GB : $5.00</option> 
      <option value="12">8GB : $12.00</option> 
      <option value="24">16GB : $24.00</option> 
     </select> 

     <select class="third column" id="cover" name="cover"> 
      <option value="0">No case </option> 
      <option value="4">Leather case : $4.00 </option> 
      <option value="4">Silicon case : $4.00 </option> 
     </select> 

     <select class="third column" id="charger" name="charger"> 
      <option value="0">No charger </option> 
      <option value="5">Car charger : $5.00 </option> 
      <option value="6">Car charger holder : $6.00 </option> 
     </select> 

     <label class="third column" for="memory">Screen protector</label> 
     <label class="third column" for="case">Shipping</label> 
     <div class="full column"></div> 

     <select class="third column" id="screen" name="screen"> 
      <option value="0">None</option> 
      <option value="0.99">x1 : $0.99</option> 
      <option value="1.79">x2 : $1.79</option> 
      <option value="2.39">x3 : $2.39</option> 
      <option value="3.40">x5 : $3.40 </option> 
     </select> 
     <select class="third column" id="delivery" name="delivery"> 
      <option value="0">Normal shipping : No charge </option> 
      <option value="35">Expedited Delivery (Fedox) : $35.00</option> 
     </select> 
     <div class="full column"> 
     </div> 

     <label class="third column" for="qty">Quantity</label> 
     <label class="third column" for="total">Total</label> 
     <div class="full column"> 
     </div> 

     <div class="third column"> 
     <input id="qty"/> 
     </div> 
     <input class="third column "id="total"/> 

     <button class="submit">Calculate</button> 
     <div class="full column"> 
     </div> 

     </form>

来源

2012-05-27 Curia

不是答案，而是一个很好的说明，请确保您的

代码并不不同的元素（即后），否则，它可能不会在FF或IE浏览器（但在Chrome会>> ） –

您的脚本正常工作在我的Firefox，即使它在控制台发出一警告：

要素在全球范围内通过ID /名称引用。改为使用W3C标准 document.getElementById（）。

这是因为total是不是你的函数中定义，请尝试：

document.getElementById('total').value = "$" + Math.round(acc*100)/100;

JSFiddle < - 测试在夜间，如果有帮助15A

检查，以及是否小提琴作品或不在您的Firefox。

此外，由@dibs指出的那样，你可以在它前面加上var定义acc：

var acc = (parseInt(mem) + parseInt(cov) + parseInt(cha) + parseFloat(scr) + parseInt(del)) * qty;

但是，这是不可能给你任何麻烦，除了也许一不小心创造了全球范围的变量。

来源

2012-05-27 01:35:06

谢谢你修好它。 – Curia

尝试jslint.com掉毛脚本看到你在那里有什么错误。

'acc' was used before it was defined.

来源

2012-05-27 01:28:15 dibs

在JavaScript中，您不必在使用前定义变量。 –

@Derek是对的，有时jslint在验证中有点过于苛刻。 –

不自动声明变量使其成为全局变量。所以最好总是宣布，以避免范围问题。 http://stackoverflow.com/questions/2485423/javascript-is-using-var-to-declare-variables-optional – dibs

JavaScript表单适用于Chrome，但不适用于Firefox

回答

相关问题