-3

ここ数日、私は Javascript について頭を悩ませようとしました。これは私の最初の適切な Javascript であり、私のコードを改善し、最終的には Javascript の知識を改善できることを誰かが理解できるかどうか疑問に思っています。これまでのコードが少し生っぽいかもしれないことを感謝します。

各製品ケースで配列を作成しないように、「calcUnitPriceF」関数を終了する方法に困惑していることの 1 つです。これらの価格はまもなくデータベースから取得されます。

以下のコードは、その機能が非常に明確であることを願っています。

<script type="text/javascript">
function update(){

var total = 0.00;
var calcUnitPrice, quantity;

var myForm = document["getElementById"]("totalform");
var justQuantity = myForm["quantity[]"];
var justPrice = myForm["productPrice[]"];
var unitPrice = myForm["unitPrice[]"];
var linePrice = myForm["linePrice[]"];

for(var i =0; i < justQuantity.length; i++)
{
 justQuantity[i].value = Math.floor(justQuantity[i].value);
 quantity = justQuantity[i].value;
 calcUnitPrice = 0;

 if(isNaN(quantity) || quantity < 0) {
   justQuantity[i].value ="0";
 }
 else
 {
  calcUnitPrice = calcUnitPriceF(justPrice[i].value,quantity);

  document.getElementById('unitPrice[' + i + ']').innerHTML = '£' + calcUnitPrice.toFixed(2);
  document.getElementById('linePrice[' + i + ']').innerHTML = '£' + (calcUnitPrice * justQuantity[i].value).toFixed(2); 
  total = (total + (quantity* calcUnitPrice));
 }
}

document.getElementById("delivery").innerHTML = "Your Order Delivery is: £2.50";
document.getElementById("Totprice2").innerHTML = "Your Order Total is: £" + total.toFixed(2);

}

function calcUnitPriceF(product,quantity)
{
 switch(product)
  {
   case '0':
    return 0;
   case '1':
    var values = [5, 4 , 15.30 , 10 , 12 ]; // Structure(Exceeding Quantity Price,Quantity Under, Price)

    for(var i = 1; i< values.length; i=i+2)
     if(quantity < values[i])
      return values[i+1];
    return values[0];
   case '2':
    return 75;
   }
}
</script>

<body>

<form id="totalform">
<select id ="productPrice[]" onchange="update()">
  <option value="0">Please Select One</option>
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
</select>
QUANTITY <input type = "text" id = "quantity[]" onChange="update()" >
UNIT PRICE <p id="unitPrice[0]" style="display:inline;">£0.00</p>
LINE PRICE <p id="linePrice[0]" style="display:inline;">£0.00</p><br />

<select id="productPrice[]" onchange="update()">
  <option value="0">Please Select One</option>
  <option value="1">Product 1</option>
  <option value="2">Product 2</option>
</select>
QUANTITY <input type = "text" id = "quantity[]" onChange="update()" >
UNIT PRICE <p id="unitPrice[1]" style="display:inline;">£0.00</p>
LINE PRICE <p id="linePrice[1]" style="display:inline;">£0.00</p><br />

<span id ="delivery">Your Order Delivery is: £0.00</span><br />
<span id ="Totprice2">Your Order Total is: £0.00</span>
</form>
4

1 に答える 1

1

一番やりたいことは、JS のアプローチを変えることです。

var project = {};
project.ShoppingCart = function() {
    this.total = 0;
    this.justQuantity = ...;
    this.currentQuantity = 0;
};
/**
 * Updates the current quantity in the shopping cart.
 * @param {!number} quantity The quantity to update with.
 * @return {void} nothing.
 */
project.ShoppingCart.prototype.updateQuantity = function(quantity) {
    // this is how to check for a number properly.
    if (!isNaN(quantity) && parseFloat(quantity) && isFinite(quantity)) {
        this.currentQuantity = quantity;
    } else {
        console.log("Invalid quantity");
    };
};

今、上記を使用するために。

var shoppingCart = new project.ShoppingCart();

Object Oriented Javascriptを見て、それを適切に使用する方法、グローバル名前空間を汚染して関数をランダムに書くのをやめ、コードにコメントして、物事を適切に検証してください。

于 2013-03-04T12:10:48.127 に答える