1

私は JavaScript を初めて使用し、私の Web サイト (カップケーキ ショップの Web サイト) 用に JavaScript で簡単な価格計算ツールを作成しようとしています。まず、ユーザーにフレーバーの選択肢のリストから選択してもらい、それをテキストエリアに投稿します。ユーザーがビーガンフレーバーを選択すると、テキストエリアに投稿するときに最後に $3.50 を追加し、ユーザーが非ビーガンを選択すると、価格2.75ドルです。テキストエリアに投稿されるものはすべて文字列です。そのため、電卓では、最後の 5 文字 (価格) を抽出し、それらを合計して小計を取得します。ループを使用してテキストエリアのリストをたどり、数値を1つずつ抽出して合計しましたが、計算が間違っていました。何が悪いのか誰か教えてくれませんか???

function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}

function addOption_list(selectbox){
var flavors = new Array("blueberry vegan","butterscotch","cappuccino vegan","carrot     
cake","carrot vegan","chocolate walnut vegan",
"chocolate peanut butter vegan","green tea & chocolate","keylime","lavender     
vegan","lemon","lemon cream vegan","mandarin orange",
"mint chocolate","mocha","peanut butter & double chocolate","raspberry swirl","red   
velvet","sesame","sesame oreo",
"strawberry","strawberry 2 vegan","tangerine","thia tea","triple   
chocolate","vanilla","very berry","vietnamese coffee","yuzu");
for (var i=0; i < flavors.length;++i){

addOption(document.drop_list.flavors_list, flavors[i], flavors[i]);
}
}

var $ = function (id){
return document.getElementById(id);
}

var cart = [];
var update_cart = function(){
if(cart.length == 0){
    $("flavor_name").value = "";
} else{
    var list = "";
    for(var i in cart){ 
        list += (parseInt(i) +1) + ". " + cart[i] + /*":  $3.50" + */ "\n"; 
    }
    $("flavor_name").value = list;


    var sum = 0;
    for(var i = 0; i < cart.length; i++){
        var price = parseFloat(list.substring(list.length - 5));
        sum += parseFloat( price.toFixed(2) );
    }

    $("subtotal").value = sum;
    var tax = parseFloat(($("subtotal").value * .08875).toFixed(2));
    $("sales_tax").value = tax;

    var total = parseFloat(price + tax).toFixed(2);
    $("total").value = total;

    }
}




var selectDropdown = function(){
    var dropdownValue=document.getElementById("flavors_list").value;
   // alert("You selected : " + dropdownValue);


if(dropdownValue == "blueberry vegan" || dropdownValue == "cappuccino vegan" ||   
       dropdownValue == "carrot vegan" || dropdownValue == "carrot vegan" ||
   dropdownValue == "chocolate walnut vegan" || dropdownValue == "chocolate peanut   
       butter vegan" || dropdownValue == "lavender vegan" || dropdownValue == "lemon   
       cream vegan" || dropdownValue == "strawberry 2 vegan"){
    alert("Adding " + dropdownValue + " to cart.");
    cart[cart.length] = dropdownValue + ":  $3.25";
    update_cart();
} else{
    alert("Adding " + dropdownValue + " to cart.");
    cart[cart.length] = dropdownValue + ":  $2.75";
    update_cart();
} 
}

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"     
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Home-Little Sweetie Cupcakes</title>
<link href="little_sweetie_styles.css" rel="stylesheet" type="text/css" />
<link rel="Shortcut Icon" href="favicon.ico" />
<script type="text/javascript" src="invoice.js"></script>


</head>

<body onLoad="addOption_list()";>
<div class="cart_content">

    <span class="content_title">
        Price Calculator
    </span>
    <p class="bodytext">To place an order, please enter the desired flavor from  
               the dropdown list:</p>
    <FORM name="drop_list" action="yourpage.php" method="POST" >
        <SELECT NAME="flavors_list" id="flavors_list"  
                    onchange="selectDropdown()">
        <Option value="" >Flavors List</option>
        </SELECT>
    </form>
    <div>
    <!--<textarea id="shopping_cart" rows="5" cols="50"></textarea>-->
    <table id="invoice">
    <tr>
        <td width="150"><textarea id="flavor_name" rows="10" cols="40" 
                     disabled="disabled" /></textarea></td>
        <td>&nbsp;</td>
        <td id="calculator">
            <label class="bodytext">Subtotal: </label><input 
                                type="text" id="subtotal" size="10" disabled="disabled" 
                                  /><br />
            <label class="bodytext">Sales Tax: </label><input 
                                 type="text" id="sales_tax" size="10" 
                                  disabled="disabled" /><br />
            <label class="bodytext">Total: </label><input type="text" 
                                id="total" size="10" disabled="disabled" /><br />
        </td>

    </tr>

    </table>
           </body>
           </html>

前もって感謝します

4

2 に答える 2

2

あなたのコードには複数の問題が見られますが、実際の HTML と値を確認できる実際の例がなければ、すべての問題が何であるかを確認するのは困難です。以下にいくつかの問題を示します。

  1. parseInt()常に 2 番目のパラメーター (基数) を渡す必要があります。そうしないと、内容に基づいて基数が推測されます。
  2. を使用しfor (x in a)て、配列の内容を繰り返し処理しないでください。これには、配列要素に加えて、配列に追加されるプロパティを含めることができます。を使用する方がはるかに安全for (var i = 0; i < array.length; i++)です。
  3. 浮動小数点演算は完全ではないため、完全な金融演算が必要な場合は、すべてをセント数に変換し、それに対して整数演算を行う必要があります。
  4. どちらparseInt()も文字列内のparseFloat()a を許容し$ないため、最初にそれらを削除する必要があります。
  5. for ループで配列を反復する場合、インクリメントするインデックスは配列へのインデックスにすぎません。実際に配列に到達して、各値を取得する必要があります。

このコード ブロックでは、何を反復しようとしているのかが明確ではありません。ループを通過するたびforに、 の同じ値が使用されますlist。配列を反復していません。

for(var i = 0; i < cart.length; i++){
    var price = parseFloat(list.substring(list.length - 5));
    sum += parseFloat( price.toFixed(2) );
}

参考までに、次のように文字列の末尾から数値を抽出することは非常に安全です。

function getNumber(str) {
    var matches = str.match(/([\d\.]+)\s*$/)
    if (matches) {
        return (+matches[1]);
    }
    return(0);
}

var str = "xxx $99.45\n";
var num = getNumber(str);
于 2012-08-05T00:44:25.337 に答える
1 
for(var i in cart)

以下で行うように、for ループとカウント変数を使用して配列をトラバースする必要があります。追加の利点:プロパティ名parseIntは必要ありません。

最後の 5 文字 (価格) を抽出し、それらを合計して小計を取得します。

for(var i = 0; i < cart.length; i++){
    var price = parseFloat(list.substring(list.length - 5));
    sum += parseFloat( price.toFixed(2) );
}

はい、すべてのアイテムcartについて、(同じ) 文字列の最後の 5 文字から価格を取得しlistます。なんてこと？

あなたが望んでいたのは、カート内の各アイテムの価格を取得することでした。そして、文字列表現に 4 文字しかない <$10 のアイテムだけではないと確信しています。したがって、カート項目の最初の文字 (ドル記号) を削除し、それに適用parseFloatします。

for (var i=0; i<cart.length; i++) {
    var price = parseFloat(cart[i].substring(1));
    sum += price;
}

また、使用しないでくださいparseFloat( price.toFixed(2) );。IE のいくつかのバグを除けば、浮動小数点演算は決して信頼できるものではなく、常に丸めを行っても改善されません。代わりに、セントの整数値で計算します (ただし、JS には技術的に整数はありません)。

var price = Math.floor(parseFloat(str, 10) * 100);
于 2012-08-05T00:44:55.423 に答える