JavaScript表單適用於Chrome，但不適用於Firefox

Question

我剛剛完成了一項任務，該任務需要我構建一個總計訂單明細等的小表單。它在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> 

Answer 1

您的腳本正常工作在我的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; 

但是，這是不可能給你任何麻煩，除了也許一不小心創造了全球範圍的變量。

Answer 2

嘗試jslint.com掉毛腳本看到你在那裏有什麼錯誤。

'acc' was used before it was defined.