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 ＆lt; - 在Nightly 15a上测试

检查Firefox是否有用以及小提琴是否有效。

另外，正如@dibs所述，您可以通过在其前面添加acc来定义var：

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

但这不太可能给你带来任何麻烦，除了可能意外地创建一个全局范围的变量。

Answer 2

尝试在jslint.com处抓取您的脚本以查看您在那里遇到的错误。

'acc' was used before it was defined.

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

2 个答案: