Question

我有一个计算器，它可以为输入值增加15％，使该值增加三倍，最后增加7.25％。然后它将该值附加到新的div中。我需要的最后一步是将提交的输入值相加，并将其显示在“总价”div上。我尝试添加价格，但这些显示为NaN。我怎么解决这个问题？谢谢。

换句话说..在Total？下看到空白的div？在最底层..好吧我想相应地添加提交的价格并显示该div内的总价格。

HTML：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  <script src="app.js"></script>
  <title>NC Tax Calculator</title>
</head>
<body>
 <div id="calculator-container">
    <h1>NC Tax Calculator</h1>
    <form id="form" name="form" action="" >
        <input type="text" name="price" id="price-holder" maxlength="10" size="10">
    </form>
   <button type="button" id="submit" class="button">Submit</button>
   <button type="button" id="reset" class="button">Reset</button>
   <div class="final-price-container"></div>
   <p>This app adds 15% to the wholesale price (Shipping Charge), then triples the price for retail and adds 7.25% (North Carolina tax).</p>
    <h2>Total</h2>
    <div id="total-price"></div>
 </div>
</body>
</html>

CSS：

<style>
#calculator-container { 
  font-family: Tahoma, Geneva, sans-serif;
  text-align: center;
  background-color: lightblue;
  margin:auto;
  margin-top: 2em;
  width: 30%;
  padding: 2%;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  border: 1px solid #999;
  border: inset 1px solid #333;
  -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
  .button {
  border-radius: 10%;
  margin: 0 8px;
  font-size: 18px; 
}
#price-holder {
  margin-bottom: 10px;
  padding: 3px;
}
#price-added {
  border: 1px solid gray;
}
#submit {
  background-color: lightgreen;
}
#reset {
  background-color: lightsalmon;
}
#calculator-container h1 {
  font-size: 2em;
  font-weight: bold;
}
.final-price-container {
  margin: 16px;
  background-color: lightyellow;
}
#calculator-container p {
  font-size: 14px;
  display: inline-block;
  text-align: center;
  width: 80%;
}
h2 {
  margin: 0 0 6px 0;
}
#total-price {
  margin: auto;
  width: 100px;
  height: 15px;
  padding: 5px;
  background-color: white;
}
</style>

Javascript：

$(document).ready(function() { 

// step 1. Enter a number into input
  // When submit button is clicked
  // Add the final price into the body div
// step 2. Display an alert button 
  // if input value is NaN display alert
  // else continue with calculation
// step 3. Calculate price 
  // add 15% to the original number 
  // triples the original number 
  // then multiplies by 7.25% for tax 
// step 4. Add reset button 
  // when clicked, it clears the div 

// global variables
var price;
var wholeSalePrice;
var submitButton = $("#submit");
var resetButton = $("#reset");


// function when submit button is clicked
submitButton.click(function() {
    //adds input value to wholeSalePrice variable and appends to div 

    wholeSalePrice = parseFloat($("#price-holder").val());
    if ( isNaN(wholeSalePrice) ) {
        alert("Please enter a number");
    } 
    else {
        priceCalculate();
        $(".final-price-container").append("<div id='price-added'>" + price + "</div>");
        console.log("whole sale price is " + wholeSalePrice);
        console.log("final price is " + price);
    };
});

//function for calculating the final price 
function priceCalculate() {
    // adds 15% to wholesale price. 
    price = wholeSalePrice + (wholeSalePrice * 0.15);
    // triples the new price.
    price = price * 3; 
    // multiply price by 7.25% to add tax.
    price = (price * 0.0725) + price;
    // set price to two decimal places.
    price = price.toFixed(2);
    return price;       
}; 

// function for reseting 
resetButton.click(function() {
    $("#price-added").remove();
  });
});

//Total price display

Answer 1

您的意思是想要通过“提交”获得所有计算结果的总和，并将其添加到“总计”div中吗？

如果是，那么您可以在此找到适用于您的示例的工作解决方案： https://jsfiddle.net/nhfka1ee/

我唯一补充的是：

    $(".final-price-container").append("<div class='price'>" + price + "</div>");

    var totalPrice = 0;
    $('.final-price-container .price').each(function(){
        totalPrice += parseFloat($(this).text());
    });

    $('#total-price').html(totalPrice);

修改

为了使重置按钮保持工作，你必须将相应的功能更改为:(因为我将带有id的多个新div更改为类.price）

resetButton.click(function() { $(".final-price-container .price").remove(); $('#total-price').html(''); }); });

我更新了小提琴以反映这一变化：https://jsfiddle.net/nhfka1ee/1/

JavaScript添加总输入值

1 个答案: