2012-08-05 37 views
1

我是javascript新手,我试图在javascript中为我的网站(蛋糕店网站)创建一个简单的价格计算器。首先,我让用户从风味选择列表中选择并将其发布到textarea,当用户选择纯素风味时,我会在发布到textarea时添加3.50美元到最后,并且当用户选择非纯素时,价格是2.75美元。发布到textarea的所有内容都是字符串。所以对于计算器,我提取最后5个字符(这是价格)并将它们加起来以得到小计。我用一个循环遍历textarea中的列表,逐个提取数字并将它们相加,然而,计算结果出错了。谁能告诉我它有什么问题?添加从字符串中提取的数字javascript

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> 

感谢

+0

什么是“错”是什么意思? – SomeKittens 2012-08-05 00:37:24

+0

如果你使用http://jsfiddle.net/创建一个例子,我会很乐意帮助 – NicoSantangelo 2012-08-05 00:37:40

+0

不要使用'for-in'循环来重复'cart'。它是一个数组,在JS中迭代数组的正确方法是for(var n = 0; n 2012-08-05 00:41:38

回答

2

我看到多个问题,在你的代码,但没有工作的例子来看看在这里我们可以看到实际的HTML和价值观,它的很难确切知道所有问题。这里有一些问题:

  1. parseInt()应始终传递的第二个参数(基数),否则会猜测基数的基础上的内容。
  2. 你永远不要使用for (x in a)迭代数组的内容。这可以包括除数组元素外还添加到数组的属性。使用for (var i = 0; i < array.length; i++)更安全。
  3. 浮点运算是不完美的,所以,如果你想完美的金融数学,就应该一切转换为数字美分,做对整数运算。
  4. 无论parseInt()也不parseFloat()将字符串中容忍$所以你必须除去那些第一。
  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); 
+0

我不认为他用他的'parseFloat'得到错误:他使用的字符串就像'“... $ 3.50 \ n”.substr(-5)': - | – Bergi 2012-08-05 00:53:41

+0

@Bergi - 这并不完全明显,因为我们不知道可能的范围,当然代码对可变长度数字(例如大于9.99美元的东西)并不安全。提取所有尾随数字和句点或类似的东西会比解开一个固定长度的字符串更安全。 – jfriend00 2012-08-05 01:07:33

+1

我向我的答案中添加了一种更安全的方法来从字符串中提取数字。 – jfriend00 2012-08-05 01:25:33

1
for(var i in cart) 

你应该traverse the array用一个for循环和计数变量,如您下面做。额外的好处:无需parseIntproperty names

我解压后5个字符(即价格),并把它们加起来得到一个小计:

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

是,在cart每一个项目,你得到的价格出来的(相同)list字符串的最后五个字符。 WTF?

你想要的是得到购物车中每件商品的价格。我相当肯定不仅有< 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);