1

我是 javascript 新手，正在尝试用 javascript 为我的网站（纸杯蛋糕店网站）创建一个简单的价格计算器。首先，我让用户从口味选择列表中选择并将其发布到 textarea，当用户选择纯素口味时，我会在发布到 textarea 时在末尾添加 3.50 美元，当用户选择非纯素时，价格是 2.75 美元。发布到 textarea 的所有内容都是字符串。所以对于计算器，我提取最后 5 个字符（即价格）并将它们相加得到小计。我使用循环遍历 textarea 中的列表以逐个提取数字并将它们相加，但是，计算结果错误。谁能告诉我有什么问题？？？

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. 您永远不应该使用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的最后五个字符中获取价格。list怎么回事？

您想要的是获得购物车中每件商品的价格。而且我很确定不仅有 <$10 的项目在其字符串表示中只有 4 个字符。因此，删除购物车项目的第一个字符（美元符号）并应用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 回答