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 / NAME引用的元素。 请改用W3C标准document.getElementById（）。

那是因为未在函数中定义total ，请尝试：

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

JSFiddle <-在每晚15a上测试

检查它是否有帮助，以及该小提琴在Firefox中是否有效。

另外，如@dibs所述，您可以通过在acc前面添加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.