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

【问题标题】：My job quote calculator is returning "X is not a function"我的工作报价计算器返回“X 不是函数”
【发布时间】：2020-05-20 21:38:38
【问题描述】：

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

我们从用户那里收集：

开始时间
结束时间
需要按摩的客户数量

然后，我们将这些变量与我们的每人所需时间和治疗师每小时费率的业务规则结合使用，以确定需要多少治疗师以及客户为这些治疗师配备人员的成本。

运行时，我的控制台显示错误消息“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>

/*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);

【问题讨论】：

ogTime 是 number，而不是 string

标签： javascript onclick string-parsing datetime-parsing array.prototype.map

【解决方案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>

【讨论】：