0

注文の詳細などを集計する小さなフォームを作成する必要がある課題を終えたところです。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>
4

2 に答える 2

1

コンソールに警告が表示されていても、スクリプトは Firefox で正常に動作します。

グローバル スコープで ID/NAME によって参照される要素。代わりに W3C 標準の document.getElementById() を使用してください。

これはtotal、関数内で定義されていなかったためです。試してください：

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

JSFiddle <-- Nightly 15a でテスト済み

それが役立つかどうか、および Firefox でフィドルが機能するかどうかを確認してください。

また、@dibs で指摘されているように、その前にacc追加することで定義できます。var

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

しかし、誤ってグローバル スコープ変数を作成してしまう可能性があることを除けば、問題が発生する可能性はほとんどありません。

于 2012-05-27T01:35:06.570 に答える
0

jslint.comでスクリプトをlintしてみて、そこにあるエラーを確認してください。

'acc' was used before it was defined.
于 2012-05-27T01:28:15.737 に答える