我的工作报价计算器返回“ X不是函数”

问题描述 投票:2回答:1

这是公司按摩工作报价计算器。

从用户处,我们收集:

  • 开始时间
  • 结束时间
  • 需要按摩的服务对象数量

然后,我们将这些变量与我们的治疗师每人所需时间和小时费率的业务规则结合使用,以确定需要多少治疗师以及客户需要多少费用来聘请这些治疗师。

[运行时,我的控制台显示错误消息“ timeStr.split不是函数”。我以为.map()方法存在问题,但我尝试解决无济于事。我是JS的新手,可以使用一些帮助。这是代码

HTML

<body>
    <label for="starttime">Start Time</label><br>
    <input id="starttime" type="time" name="starttime" placeholder="Start time"><br>
    <label for="endtime">End Time</label><br>
    <input id="endtime" type="time" name="endtime" placeholder="End time"><br>
    <label for="clients"># of people needing massage</label><br>
    <input id="clients" type="number" name="clients" id=""><br>
    <input  type="button" value="Submit" id="inputbtn" onclick="calc()">
</body>

JS

/*User Inputs*/
        const start = document.getElementById("starttime").value;
        const end = document.getElementById("endtime").value;
        const people = document.getElementById("clients").value;
        let timeStart = new Date("01/02/2020" + start);
        let timeEnd = new Date("01/02/2020"+end);

        /*constants*/
        const rate = 80;
        const allot = "00:20:00";


        /*Time converter*/

        function convTime(timeStr){
            arr = timeStr.split(":");
            arr = arr.map(Number=> Number);

            let theHours = arr[0];
            let theMinutes = arr[1]/60;
            let timeDec = theHours+theMinutes;

            return timeDec;

        }


        /*formulas*/
        const ogTime = timeEnd - timeStart;
        const givenTime = convTime(ogTime);
        const convAllot = convTime(allot)
        const realTime = people*convAllot;
        const therapists = realTime/givenTime;
        const price = therapists*rate*givenTime;


        console.log(price);
javascript onclick string-parsing datetime-parsing array.prototype.map
1个回答
1
投票
  • 已将用户输入的声明变量移动到Calc()方法中,以在用户插入值之后获取值,而不仅是在文档加载中
  • 使用MomentJs库计算差异日期并获取小时,分钟,...
  • 设置输入仅用于DEMO的默认值

/*constants*/
var dateStr = "01/02/2020";
const rate = 80;
const allot = moment(new Date(dateStr)).add("+20m"); // 20 minutes

/*Time converter*/
function convTime(t) {
  t = moment(t);
  let theHours = t.format('h');
  let theMinutes = t.format('mm');
  let timeDec = Number(theHours) + Number(theMinutes);

  return timeDec;
}

function calc() {
  /*User Inputs*/
  const start = document.getElementById("starttime").value;
  const end = document.getElementById("endtime").value;
  const people = document.getElementById("clients").value;
  var timeStart = new Date(dateStr + " " + start);
  var timeEnd = new Date(dateStr + " " + end);

  /*formulas*/
  const ogTime = moment(timeEnd).diff(timeStart);
  const givenTime = convTime(ogTime);
  const convAllot = convTime(allot);
  const realTime = people * convAllot;
  const therapists = realTime / givenTime;
  const price = therapists * rate * givenTime;

  console.log(price);
}

calc(); // call it on load -- remove this if you want onclick only
<label for="starttime">Start Time</label><br>
<input id="starttime" type="time" name="starttime" placeholder="Start time" value="07:00"><br>
<label for="endtime">End Time</label><br>
<input id="endtime" type="time" name="endtime" placeholder="End time" value="08:00"><br>
<label for="clients"># of people needing massage</label><br>
<input id="clients" type="number" name="clients" value="1"><br>
<input type="button" value="Submit" id="inputbtn" onclick="calc()">

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
© www.soinside.com 2019 - 2024. All rights reserved.