Question

为什么这个简单的代码不返回浮点（声明的常量）美元值？我已经尝试过parseFloat但它不起作用。最有可能采用更好的方法，但我是初学者，但快速掌握这个概念。提前谢谢！

<!doctype html>
<html>
<head>
<meta charset="utf-8">
     <!--link to CSS Style sheet-->
     <link href="style.css" rel="stylesheet" type="text/css">
     <title>Allen Ricardo's Dance Studio</title>
           <!--JS Script and function here-->
           <!--Prompt user to enter an age
           create variable to hold age
           create variables to hold constant ticket prices
           use relational operators and if/else statements to check        
           condition of age
           output the cost of the ticket.-->
    <script>

  function verifyAge() {
        <!--constant variables for ticket prices-->
        var TICKET_PRICE_1 = 3.00;
        var TICKET_PRICE_2 = 7.00;
        var TICKET_PRICE_3 = 9.00;
        var age=prompt("Enter Customer's Age: ", "");

           if(age < 4 && age > 0)
                document.getElementById("tickPrice").innerHTML="$" +     
 TICKET_PRICE_1;

                else if(age >= 4 && age <= 16)
                    document.getElementById("tickPrice").innerHTML="$" + 
 TICKET_PRICE_2;

                    else if(age > 16)
                        document.getElementById("tickPrice").innerHTML="$" + 
 TICKET_PRICE_3;
        }
    </script>

 </head>


<body>
<!--add image from previous assignment question here-->

<header>
    <img src="danc_logo.png" width="200" height="200" alt="Studio Logo">
    <h1>Allen Ricardo's Dance Ticket Prices</h1></header>

    <!--container 1-->
    <div id="buttonPrompt">
        <h2>Click on the button below to enter customer's age</h2></div>
        <!--container 2-->
        <div id="defaultDisplay">
            <p>Under Age 4 (age &lt; 4) cost is: <strong>$3.00</strong></p>
            <p>Between ages 4 and 16 (4 ≥ age ≤ 16) cost is: 
 <strong>$7.00</strong></p>
            <p>Older than 16 (age > 16) cost is: <strong>$9.00</strong></p> 
 </div>
            <!--Create button for user here-->
            <!--Container 3-->
            <div id="button">
                <button type="button" id="ageVerify" 
   onClick="verifyAge()">Enter Customer's Age</button></div>
                <!--Container 4-->
                <div id="output">
                    <p>The Cost of Allen's Ticket is: <span id="tickPrice">  
   </span></p></div>
   </body>
   </html>

Answer 1

小数点后没有值的意外输出的原因在于：

if (age < 4 && age > 0) {
  document.getElementById('tickPrice').innerHTML = '$' +
  TICKET_PRICE_1;
} 
else if (age >= 4 && age <= 16) {
  document.getElementById('tickPrice').innerHTML = '$' +
  TICKET_PRICE_2;
} 
else if (age > 16) {
  document.getElementById('tickPrice').innerHTML = '$' +
  TICKET_PRICE_3;
}

如果想要小数点后的设定精度，请使用toFixed()，将代码更改为：

if (age < 4 && age > 0) {
  document.getElementById('tickPrice').innerHTML = '$' +
  TICKET_PRICE_1.toFixed(2);
} 
else if (age >= 4 && age <= 16) {
  document.getElementById('tickPrice').innerHTML = '$' +
  TICKET_PRICE_2.toFixed(2);
} 
else if (age > 16) {
  document.getElementById('tickPrice').innerHTML = '$' +
  TICKET_PRICE_3.toFixed(2);
}

请注意，这是一种显示惯例，并没有实际改变所代表的数字。

第二个问题是使用prompt()

var age=prompt("Enter Customer's Age: ", "")

prompt()返回一个String，需要进行解析。你可以：

var age = parseInt(prompt("Enter Customer's Age: ", ""));

Why not use floating points for money

作为您的问题和对评论的回应的辅助，请考虑以下合理情况。

var price = 0.10; 
var fee = 0.20; 
var total = price + fee;

浮点数不能完全代表所有值。由于JavaScript数字都是浮点数，因此范围内的整数是安全的（ - （2 ^ 53 - 1）到2 ^ 53 - 1）。

所以如果输出总数，你就会得到

 0.30000000000000004

这是不正确的，那应该是0.30。

为什么我的函数不返回浮点数

1 个答案: