试图在javascript中计算一个简单的折扣和销售税答案

【问题标题】：Trying to calculate a simple discount and sales tax in javascript试图在javascript中计算一个简单的折扣和销售税
【发布时间】：2018-01-31 22:35:04
【问题描述】：

我只是想输入一个数字，然后加上 10%，然后再取总额和 0.08% 的税。你能帮我弄清楚我做错了什么吗？我确定这是我忽略的简单问题，但我对此很陌生，无法弄清楚出了什么问题。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Price tool</title>
</head>
<body>

  <form name="operation_form">
    <label style="font-size:20px"><b>Price Tool</b></label>
    <br/>
    <br/>
    <br/>
    <label>Item Price:  </label><input type="number" name='acertscore' value="" />
    <br/>
    <br/>
    <label><b>Total is:</b></label><input type="number" name="answerbox">
    <br/>
    <input type="button" value="Calculate" onclick="costCalc();" />
    <br/>
    <input type="button" value="Reset" onClick="this.form.reset()" />
  </form>
  
  <script type="text/javascript">
    function costCalc() {
      var form = document.forms["operation_form"];
      var x = form["acertscore"].value;
      var cost = (x * .1) + x;
      var answer = (cost * .08) + cost;
      form["answerbox"].value = answer;
    }
  </script>
  
</body>
</html>

【问题讨论】：

您遇到的错误究竟是什么？结果是计算错误还是有不同的错误？
当您将数字添加到字符串时，它不会进行添加。例如：“3”+ 3 =“33”（不是你想要的 6。）确保你用数字做数学
x 是一个字符串，所以(x * .1) + x 转换字符串以进行乘法运算，如果x=100 它给出数字10，然后加法完成作为字符串：10 + "100" -> "10100"——你可以做的一件事是(x * .1) + (1 * x)
您可以使用console.log()自己找到这个答案
单独 -- 请注意，加 10% 不是折扣，您添加的是溢价，使商品更贵;

标签： javascript

【解决方案1】：

当我从值 100 开始时，我在您的代码中记录了“成本”的值

  var cost = (x * .1) + x;
  console.log(cost);

得到的值为“10100”

但如果我确定 x 是一个数字，我会得到正确的值 (110)

  var cost = (x * .1) +  Number(x);
  console.log(cost);

我总共得到 118.8。

【讨论】：

【解决方案2】：

当您从输入控件中检索值时，它会以字符串值的形式出现。

var x = form["acertscore"].value; // x is a string

如果您立即将其转换为数字，您将避免其他问题。

var x = Number(form["acertscore"].value); // x is a number

function costCalc() {
  var form = document.forms["operation_form"];
  var x = Number(form["acertscore"].value);
  var cost = (x * .1) + x;
  var answer = (cost * .08) + cost;
  form["answerbox"].value = answer;
}

<form name="operation_form">
  <label style="font-size:20px"><b>Price Tool</b></label>
  <br/>
  <br/>
  <br/>
  <label>Item Price:  </label><input type="number" name="acertscore" value="" />
  <br/>
  <br/>
  <label><b>Total is:</b></label><input type="number" name="answerbox">
  <br/>
  <input type="button" value="Calculate" onclick="costCalc();" />
  <br/>
  <input type="button" value="Reset" onClick="this.form.reset()" />
</form>

【讨论】：

【解决方案3】：

问题是您的answer 号码太长以至于它试图显示指数。因此，该数字被视为字符串，尽管您已指定输出进入 <input> 字段，其中 type 或 number。因为你的answer不是数字，所以无法显示。

要解决此问题，您可以在显示之前将输出解析为float：

form["answerbox"].value = parseFloat(answer);

function costCalc() {
  var form = document.forms["operation_form"];
  var x = form["acertscore"].value;
  var cost = (x * .1) + x;
  var answer = (cost * .08) + cost;
  form["answerbox"].value = parseFloat(answer);
}

<form name="operation_form">
  <label style="font-size:20px"><b>Price Tool</b></label>
  <br/>
  <br/>
  <br/>
  <label>Item Price:  </label><input type="number" name='acertscore' value="" />
  <br/>
  <br/>
  <label><b>Total is:</b></label><input type="number" name="answerbox">
  <br/>
  <input type="button" value="Calculate" onclick="costCalc();" />
  <br/>
  <input type="button" value="Reset" onClick="this.form.reset()" />
</form>

希望这会有所帮助！

【讨论】：