Javascript函数不计算字段答案

【问题标题】：Javascript functions not calculating the fieldsJavascript函数不计算字段
【发布时间】：2017-11-27 22:37:44
【问题描述】：

我的 javascript 函数没有从输入字段中提取值并执行计算。我正在尝试创建一个表单：

1) 允许输入开始时间、结束时间和工资率， 2) 计算总小时数（开始-结束）， 3) 将总小时数乘以工资率得到时间段的总工资， 4) onclick 以 innerhtml 形式返回总薪酬。

我无法弄清楚为什么该函数不会从 html 中获取值并执行计算。有什么想法吗？我是这方面的新手。我尝试将函数添加到 onclick，我尝试在按钮中调用函数，将变量放在函数内，将按钮指向包含总数的变量以及其他 100 个东西，但我仍然卡住了。

<!DOCTYPE html>

<head>
    <title> Babysitter Pay Calculator </title>
    <script>


        function calculate (enterAfternoonEndTime, enterAfternoonStartTime, enterAfternoonPayRate) {

            return totalAfternoonPay;


        var afternoonStartTime = document.getElementbyId("enterAfternoonStartTime").value;//military time
        var afternoonEndTime = document.getElementbyId("enterAfternoonEndTime").value;
        var afternoonPayRate = document.getElementbyId("enterAfternoonPayRate").value; 
        var totalAfternoonPay = (enterAfternoonEndTime - enterAfternoonStartTime) * enterAfternoonPayRate
            }
        </script>
</head>

<body>

        <h1>Welcome to the Babysitter Calculator!</h1>
        <p> Pay is calculated for the following shifts: </p>
            <ul>
                <li>Afternoon: 5:00pm - 8:00pm </li>
                <li>Evening: 8:01pm - Midnight</li>
                <li>Overnight: 12:01am - 4:00am</li>
            </ul>   


        <p> 
            <label>Enter afternoon start time (i.e, 13:00 = 1pm):</label>
            <input type = "number" name="enterAfteroonStartTime" id="enterAfteroonStartTime" /> 
        </p>

        <p>
            <label>Enter afternoon end time:</label>
            <input type = "number" name ="enterAfternoonEndTime" id = "enterAfternoonEndTime" />
        </p>

        <p>
            <label>Enter afternoon pay rate:</label>
            <input type = "number" name="enterAfternoonPayRate" id = "enterAfternoonPayRate"/> 
        </p>

        <button type="button" onclick="function calculate"> Calculate! </button>

        <p id = showcalculation>
            <label> Total Pay Per Shift: </label> 
            <script> document.getElementbyId(var totalAfternoonPay).innerhtml = "totalAfternoonPay";</script>
        </p>    



</body>
</html>

【问题讨论】：

您的代码中有几个语法错误。您可以使用浏览器的开发者控制台查看这些错误。请修复它们并更新您的问题。还要注意：它是document.getElementById，你也有一个错字，应该是onclick=calculate()

标签： javascript forms function

【解决方案1】：

您的代码中有大量错误。未声明的变量，onClick 的错误使用，意外的标记。我对您所做的工作做了尽可能少的更改以使其正常工作，但您应该在此处处理一些基础知识。

<!DOCTYPE html>
<html>
 <head>
  <title> Babysitter Pay Calculator </title>
  <script>
    function calculate() {
        var afternoonStartTime = document.getElementById("enterAfteroonStartTime").value; //military time
        var afternoonEndTime = document.getElementById("enterAfternoonEndTime").value;
        var afternoonPayRate = document.getElementById("enterAfternoonPayRate").value;
        var totalAfternoonPay = (afternoonEndTime - afternoonStartTime) * afternoonPayRate / 100;
        document.getElementById('pay').innerText = totalAfternoonPay;
    }
  </script>
 </head>
 <body>
   <h1>Welcome to the Babysitter Calculator!</h1>
   <p> Pay is calculated for the following shifts: </p>
   <ul>
      <li>Afternoon: 5:00pm - 8:00pm </li>
      <li>Evening: 8:01pm - Midnight</li>
      <li>Overnight: 12:01am - 4:00am</li>
   </ul>

   <p>
      <label>Enter afternoon start time (i.e, 13:00 = 1pm):</label>
      <input type="number" name="enterAfteroonStartTime" id="enterAfteroonStartTime" />
   </p>

   <p>
      <label>Enter afternoon end time:</label>
      <input type="number" name="enterAfternoonEndTime" id="enterAfternoonEndTime" />
   </p>

   <p>
      <label>Enter afternoon pay rate:</label>
      <input type="number" name="enterAfternoonPayRate" id="enterAfternoonPayRate" />
   </p>

   <button type="button" onclick="calculate()"> Calculate! </button>

   <p id=s howcalculation>
      <label> Total Pay Per Shift: </label>
      <span id="pay"></span>
   </p>
  </body>
</html>

【讨论】：

【解决方案2】：

您的代码有很多错误。我将列出其中的一些，以便您可以大致了解问题所在：

<p id = showcalculation> 应该是 <p id="showcalculation">
<button type="button" onclick="function calculate"> 的“onclick”属性错误。您需要调用该函数，而不是重新声明它。应该是<button type="button" onclick="calculate();">
您的函数在进行计算之前返回了一个值。 return 语句应该结束，当你确实返回一些东西时。
您正在使用document.getElementById 获取计算所需的所有数据以获取值。使用它，你不再需要参数了
document.getElementbyId(var totalAfternoonPay).innerhtml = "totalAfternoonPay"; 完全错误。您需要将选择器传递给getElementById 函数，而不是在其上声明另一个变量。检查我的 sn-p 以查看正确的方法
注意套管。所有函数都区分大小写。 document.getElementbyId 不起作用。正确的是document.getElementById。

尝试阅读一些教程或阅读一些有关编程的书籍。在没有基础知识的情况下进入它不会让你理解要走的路。还可以使用一些 IDE，例如 VSCode 或 Visual Studio。它会给你一些关于错误编写代码的建议，并会节省你的时间:)

<!DOCTYPE html>
<head>
   <title> Babysitter Pay Calculator </title>
   <script>
      function calculate () {
      
      var afternoonStartTime = document.getElementById("enterAfternoonStartTime").value;//military time
       var afternoonEndTime = document.getElementById("enterAfternoonEndTime").value;
       var afternoonPayRate = document.getElementById("enterAfternoonPayRate").value; 
       var totalAfternoonPay = (afternoonEndTime - afternoonStartTime) * afternoonPayRate
      
      document.getElementById("totalAfternoonPay").innerHTML = totalAfternoonPay;
      
          }
   </script>
</head>
<body>
   <h1>Welcome to the Babysitter Calculator!</h1>
   <p> Pay is calculated for the following shifts: </p>
   <ul>
      <li>Afternoon: 5:00pm - 8:00pm </li>
      <li>Evening: 8:01pm - Midnight</li>
      <li>Overnight: 12:01am - 4:00am</li>
   </ul>
   <p> 
      <label>Enter afternoon start time (i.e, 13:00 = 1pm):</label>
      <input type = "number" name="enterAfternoonStartTime" id="enterAfternoonStartTime" /> 
   </p>
   <p>
      <label>Enter afternoon end time:</label>
      <input type = "number" name ="enterAfternoonEndTime" id = "enterAfternoonEndTime" />
   </p>
   <p>
      <label>Enter afternoon pay rate:</label>
      <input type = "number" name="enterAfternoonPayRate" id = "enterAfternoonPayRate"/> 
   </p>
   <p >
   </p>
   <button type="button" onclick="calculate();"> Calculate! </button>
   <p id = "showcalculation">
      <label> Total Pay Per Shift:<span id="totalAfternoonPay"></span> </label> 
   </p>
</body>
</html>

【讨论】：