Попытка рассчитать простую скидку и налог с продаж в JavaScript

Я просто пытаюсь ввести число, а затем добавить 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 ответа

Решение

Когда вы извлекаете значение из элемента управления вводом, оно отображается как строковое значение.

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>

Источник

Я зарегистрировал значение "стоимость" в вашем коде, когда я начинаю со значения 100

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

и получил значение "10100"

Но если я проверю, что x - это число, я получу правильное значение (110)

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

И я получаю 118,8 в общей сложности.

Источник

Проблема в том, что ваш 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>

Надеюсь это поможет!

Источник
Другие вопросы по тегам