使用JavaScript制作费用计算器时遇到麻烦

时间：2019-12-05 23:30:11

标签： javascript html

我正在开发万古霉素成本计算器，但似乎无法弄清楚代码的错误之处。我也尝试过JavaScript控制台，但是看不到任何错误。目标是接受所有输入，并在形式的输出属性中显示结果，但似乎无法找出代码中的错误。

这是每剂费用的公式：

supplyCost = vancomycinCost + diluentCost + ancillaryCost;

laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);

HTML：

 <!DOCTYPE html>
        <html lang="en" dir="ltr">

        <head>
          <meta charset="utf-8">
          <title>Vancomycin Dose Cost Calculator</title>

          <link href="https://fonts.googleapis.com/css?family=Montserrat&display=swap" rel="stylesheet">
          <link href="https://fonts.googleapis.com/css?family=Cinzel&display=swap" rel="stylesheet">

          <!-- Bootstrap core CSS -->
          <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
          <link rel="stylesheet" href="./public/css/styles.css">

        </head>

        <body>



          <form name="calc Form" id="calcform" action="">

            <h1>What is the cost of a 1 g Vancomycin dose?</h1>

            <div class="form-group row">
              <label class="col-sm-2 col-form-label"> Vancomycin cost: </label>
              <div class="col-sm-2">
                <input type="text" id="vancomycinCost" name="vancomycin" class="form-control" placeholder="$">
              </div>
            </div>

            <div class="form-group row">
              <label class="col-sm-2 col-form-label"> Diluent cost: </label>
              <div class="col-sm-2">
                <input type="text" name="diluent" id="diluentCost" class="form-control" placeholder="$">
              </div>
            </div>

            <div class="form-group row">
              <label class="col-sm-2 col-form-label"> Ancillary cost: </label>
              <div class="col-sm-2">
                <input type="text" name="ancillary" id="ancillaryCost" class="form-control" placeholder="$" onchange="calculateTotal()">
              </div>
            </div>

            <div class="form-group row">
              <label class="col-sm-2 col-form-label"> % Waste: </label>
              <div class="col-sm-2">
                <input type="text" name="waste" id="wastePercentage" class="form-control" placeholder="%">
              </div>
            </div>


            <div class="form-group row">
              <label class="col-sm-2 col-form-label"> Pharmacy Tech: </label>
              <div class="col-sm-2">
                <input type="text" name="tHourly" id="tHourlyCost" class="form-control" placeholder="Hourly Rate"> <br>
                <input type="text" name="tMinutes" id="tMinutesCost" class=" tm form-control" placeholder="Time per dose (min)">
              </div>
            </div>

            <div class="form-group row">
              <label class="col-sm-2 col-form-label"> Pharmacist: </label>
              <div class="col-sm-2">
                <input type="text" name="pHourly" id="pHourlyCost" class="form-control" placeholder="Hourly Rate"> <br>
                <input type="text" name="pMinutes" id="pMinutesCost" class=" pm form-control" placeholder="Time per dose (min)">

              </div>
              <output class=" o btn btn-light" id="output"> </output>
              <button type="submit" class=" b btn btn-outline-light">See Result</button>
            </div>

          </form>

          <script src="index.js" charset="utf-8"></script>

        </body>
        </html>

JavaScript（index.js）：

            let form = document.querySelector('form');
            let output = document.querySelector('#output');
            let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
            let diluent = parseFloat(document.getElementById("diluentCost").value);
            let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
            let waste = parseFloat(document.getElementById("wastePercentage").value);
            let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
            let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
            let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
            let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
            let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
            let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);

            form.onsubmit = function(e){
              e.prevenDefault();
              let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
              output.innerHTML = costPerDose;

            }

2 个答案:

答案 0 :(得分：0)

在声明supplyCost时，您没有使用之前声明的变量。我建议您更改您的
let supplyCost = vancomycinCost + diluentCost + ancillaryCost;
到
let supplyCost = vancomycin + diluent + ancillary;，因为这些值被解析为浮点数

与您的laborCost相同
let laborCost = (pHourlyCost * pMinutesCost / 60) + (tHourlyCost * tMinutesCost / 60);
应该更改为
let laborCost = (pHourly * pMinutes / 60) + (tHourly * tMinutes / 60);

您的最终语法错误在行中
let costPerDose = (supplyCost + laborCost) * (1 + wastePercentage);
将wastePercentage替换为waste。

最终，这里要学习的是您应该使用声明的变量，因为使用元素的idname将为您提供实际的元素对象，而不是其值

您似乎还忘记了代码周围的脚本标签。

编辑：@ Aydin4ik还显示出以下事实：您调用了尚未在元素“ ancillaryCost” onChange事件中创建/声明的函数

答案 1 :(得分：0)

此代码中有很多错误。

  1. 我假设index.js脚本文件就是您在上面的HTML之后粘贴的文件-明确说明
    2. 未定义
  2. calculateTotal。我写了一个新函数-returnCostPerDose()，如果需要 onChange 行为
    3. ，则可以使用该函数。
  3. 您对supplyCost，laborCost和costPerDose的计算包含多个错误的变量名-确保在声明变量时使用它们。
  4. 您要在加载时声明变量-每次运行新计算（ onChange ）时都必须对其进行更新，或者仅在计算函数中声明它们。
  5. 如果您在浏览器中以HTML格式运行代码，则最好不要声明自己的标记-使用HTML5规范中提供的现有标记之一（请参阅<output>）。

请查看此代码段以获取最低的最低工作版本，然后从那里进行改进。

var returnCostPerDose = function(e){
  e.preventDefault();
  let vancomycin = parseFloat(document.getElementById("vancomycinCost").value);
  let diluent = parseFloat(document.getElementById("diluentCost").value);
  let ancillary = parseFloat(document.getElementById("ancillaryCost").value);
  let waste = parseFloat(document.getElementById("wastePercentage").value);
  let tHourly = parseFloat(document.getElementById("tHourlyCost").value);
  let pHourly = parseFloat(document.getElementById("pHourlyCost").value);
  let tMinutes = parseFloat(document.getElementById("tMinutesCost").value);
  let pMinutes = parseFloat(document.getElementById("pMinutesCost").value);
  let supplyCost = vancomycin + diluent + ancillary;
  let laborCost = (pHourly * pMinutes / 60) + (tHourly * tMinutes / 60);
  let costPerDose = (supplyCost + laborCost) * (1 + (waste/100));
  document.getElementById("output").innerHTML = costPerDose
}
<form name="calcForm" id="calcform" action="" onSubmit="returnCostPerDose(event)">

  <h1>What is the cost of a 1 g Vancomycin dose?</h1>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label"> Vancomycin cost: </label>
    <div class="col-sm-2">
      <input type="text" id="vancomycinCost" name="vancomycin" class="form-control" placeholder="$">
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label"> Diluent cost: </label>
    <div class="col-sm-2">
      <input type="text" name="diluent" id="diluentCost" class="form-control" placeholder="$">
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label"> Ancillary cost: </label>
    <div class="col-sm-2">
      <input type="text" name="ancillary" id="ancillaryCost" class="form-control" placeholder="$">
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label"> % Waste: </label>
    <div class="col-sm-2">
      <input type="text" name="waste" id="wastePercentage" class="form-control" placeholder="%">
    </div>
  </div>


  <div class="form-group row">
    <label class="col-sm-2 col-form-label"> Pharmacy Tech: </label>
    <div class="col-sm-2">
      <input type="text" name="tHourly" id="tHourlyCost" class="form-control" placeholder="Hourly Rate"> <br>
      <input type="text" name="tMinutes" id="tMinutesCost" class=" tm form-control" placeholder="Time per dose (min)">
    </div>
  </div>

  <div class="form-group row">
    <label class="col-sm-2 col-form-label"> Pharmacist: </label>
    <div class="col-sm-2">
      <input type="text" name="pHourly" id="pHourlyCost" class="form-control" placeholder="Hourly Rate"> <br>
      <input type="text" name="pMinutes" id="pMinutesCost" class=" pm form-control" placeholder="Time per dose (min)">

    </div>
    <div class=" o btn btn-light" id="output"> </div>
    <button type="submit" class=" b btn btn-outline-light">See Result</button>
  </div>

</form>

相关问题
最新问题