尝试使用PHP和Javascript创建时间表

Question

我偶然发现了this post来自谷歌。我正在尝试建立一个计算总小时数的时间表。

在尝试链接的帖子时，它不会计算。更糟糕的是......我真的不知道我在做什么，所以我实际上是在攻击上面的代码。

由于

function calculateTime(){

  //Get selected data  
  var elt = document.getElementById("supthu1a");
  var supthu1 = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("supfri1a");
  var supfri1 = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("supsat1a");
  var supsat1 = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("supmon1a");
  var supmon1 = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("suptue1a");
  var suptue1 = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("supwed1a");
  var supwed1 = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("supthu2a");
  var supthu2 = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("supfri2a");
  var supfri2 = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("supsat2a");
  var supsat2 = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("supmon2a");
  var supmon2 = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("suptue2a");
  var suptue2 = elt.options[elt.selectedIndex].value;

  var elt = document.getElementById("supwed2a");
  var supwed2 = elt.options[elt.selectedIndex].value;
  

  //convert data to integers
  supthu1 = parseInt(supthu1a);
  supfri1 = parseInt(supfri1a);
  supsat1 = parseInt(supsat1a);
  supmon1 = parseInt(supmon1a);
  suptue1 = parseInt(suptue1a);
  supwed1 = parseInt(supwed1a);
  supthu2 = parseInt(supthu2a);   
  supfri2 = parseInt(supfri2a);
  supsat2 = parseInt(supsat2a);
  supmon2 = parseInt(supmon2a);
  suptue2 = parseInt(suptue2a);	
  supwed2 = parseInt(supwed2a);	
   
  //calculate total value  
  var total = supthu1+supfri1+supsat1+supmon1+suptue1+supwed1+supthu2+supfri2+supsat2+supmon2+suptue2+supwed2; 
  
  //print value to  PicExtPrice 
  document.getElementById("PicExtHours").value=total;

}

<FORM Name="Timesheet">
		
<form action='' method='post'>
<p><label>Name</label><br><input type='text' name='name' value=''></p> 
<p><label>Employee Number:</label><br><input type='text' name='empnumber' value=''></p> 
<p><label>Department</label><br><input type='text' name='dept' value=''></p> 
<p><label>Pay Period Ending</label><br><input type='text' name='ppend' value=''></p> 
<br>
<p>
	
	<label>Support</label>
	<br>
	<label>Thu</label><input type='number' name='supthu1' onChange="calculateTime()" id="supthu1a" maxlength="3" size="3" value=''>
	<label>Fri</label><input type='number' name='supfri1' onChange="calculateTime()" id="supfri1a" maxlength="3" size="3" value=''>
	<label>Sat</label><input type='number' name='supsat1' onChange="calculateTime()" id="supsat1a" maxlength="3" size="3" value=''>
	<label>Mon</label><input type='number' name='supmon1' onChange="calculateTime()" id="supmon1a" maxlength="3" size="3" value=''>
	<label>Tue</label><input type='number' name='supteu1' onChange="calculateTime()" id="suptue1a" maxlength="3" size="3" value=''>
	<label>Wed</label><input type='number' name='supwed1' onChange="calculateTime()" id="supwed1a" maxlength="3" size="3" value=''>
	<label>Thu</label><input type='number' name='supthu2' onChange="calculateTime()" id="supthu2a" maxlength="3" size="3" value=''>
	<label>Fri</label><input type='number' name='supfri2' onChange="calculateTime()" id="supfri2a" maxlength="3" size="3" value=''>
	<label>Sat</label><input type='number' name='supsat2' onChange="calculateTime()" id="supsat2a" maxlength="3" size="3" value=''>
	<label>Mon</label><input type='number' name='supmon2' onChange="calculateTime()" id="supmon2a" maxlength="3" size="3" value=''>
	<label>Tue</label><input type='number' name='suptue2' onChange="calculateTime()" id="suptue2a" maxlength="3" size="3" value=''>
	<label>Wed</label><input type='number' name='supwed2' onChange="calculateTime()" id="supwed2a" maxlength="3" size="3" value=''>
</p> 
</FORM>
<button type="button" onclick="calculateTime()">Calculate</button>
Total Hours:<INPUT type="text" id="PicExtHours" Size=8>
	
<p><input type='submit' name='submit' value='Submit'></p> 
</form>

Answer 1

您提供的代码存在一些问题，导致其无法具备基本级别的功能。我已经对您的代码进行了更正，如下所示：

HTML更正：

• HTML <form>元素cannot be nested，因此我将它们组合在一起 一个<form>，包含两个属性。
• 您为几乎所有<input>元素分配了一个空字符串的默认值。不幸的是，您稍后使用parseInt()函数，该函数不会为空字符串返回0，而实际上是NaN。我为所有<input>元素分配了默认值0。

JavaScript更正：

• 您尝试使用<input>访问.options[elt.selectedIndex].value元素的值。这是您访问<select>元素值的方法 - 对于<input type="number">，只需.value即可。
• 您传递给parseInt()的内容有误。而不是传递函数<input>的值，而是传递<input>本身。因此，您应该使用parseInt(supthu1a)。
而不是parseInt(supthu1)之类的内容

您的结果代码如下：

<form action='' method='post' name="Timesheet">
    <p>
        <label>Name</label>
        <br>
        <input type='text' name='name' value=''>
    </p>
    <p>
        <label>Employee Number:</label>
        <br>
        <input type='text' name='empnumber' value=''>
    </p>
    <p>
        <label>Department</label>
        <br>
        <input type='text' name='dept' value=''>
    </p>
    <p>
        <label>Pay Period Ending</label>
        <br>
        <input type='text' name='ppend' value=''>
    </p>
    <br>
    <p>
        <label>Support</label>
        <br>
        <label>Thu</label>
        <input type='number' name='supthu1' onChange="calculateTime()" id="supthu1a" maxlength="3" size="3" value='0'>
        <label>Fri</label>
        <input type='number' name='supfri1' onChange="calculateTime()" id="supfri1a" maxlength="3" size="3" value='0'>
        <label>Sat</label>
        <input type='number' name='supsat1' onChange="calculateTime()" id="supsat1a" maxlength="3" size="3" value='0'>
        <label>Mon</label>
        <input type='number' name='supmon1' onChange="calculateTime()" id="supmon1a" maxlength="3" size="3" value='0'>
        <label>Tue</label>
        <input type='number' name='supteu1' onChange="calculateTime()" id="suptue1a" maxlength="3" size="3" value='0'>
        <label>Wed</label>
        <input type='number' name='supwed1' onChange="calculateTime()" id="supwed1a" maxlength="3" size="3" value='0'>
        <label>Thu</label>
        <input type='number' name='supthu2' onChange="calculateTime()" id="supthu2a" maxlength="3" size="3" value='0'>
        <label>Fri</label>
        <input type='number' name='supfri2' onChange="calculateTime()" id="supfri2a" maxlength="3" size="3" value='0'>
        <label>Sat</label>
        <input type='number' name='supsat2' onChange="calculateTime()" id="supsat2a" maxlength="3" size="3" value='0'>
        <label>Mon</label>
        <input type='number' name='supmon2' onChange="calculateTime()" id="supmon2a" maxlength="3" size="3" value='0'>
        <label>Tue</label>
        <input type='number' name='suptue2' onChange="calculateTime()" id="suptue2a" maxlength="3" size="3" value='0'>
        <label>Wed</label>
        <input type='number' name='supwed2' onChange="calculateTime()" id="supwed2a" maxlength="3" size="3" value='0'>
    </p>
    <button type="button" onclick="calculateTime()">Calculate</button>Total Hours:
    <INPUT type="text" id="PicExtHours" Size=8 value='0'>
    <p>
        <input type='submit' name='submit' value='Submit'>
    </p>
</form>

function calculateTime() {

    //Get selected data  
    var elt = document.getElementById("supthu1a");
    var supthu1 = elt.value;

    var elt = document.getElementById("supfri1a");
    var supfri1 = elt.value;

    var elt = document.getElementById("supsat1a");
    var supsat1 = elt.value;

    var elt = document.getElementById("supmon1a");
    var supmon1 = elt.value;

    var elt = document.getElementById("suptue1a");
    var suptue1 = elt.value;

    var elt = document.getElementById("supwed1a");
    var supwed1 = elt.value;

    var elt = document.getElementById("supthu2a");
    var supthu2 = elt.value;

    var elt = document.getElementById("supfri2a");
    var supfri2 = elt.value;

    var elt = document.getElementById("supsat2a");
    var supsat2 = elt.value;

    var elt = document.getElementById("supmon2a");
    var supmon2 = elt.value;

    var elt = document.getElementById("suptue2a");
    var suptue2 = elt.value;

    var elt = document.getElementById("supwed2a");
    var supwed2 = elt.value;


    //convert data to integers
    supthu1 = parseInt(supthu1);
    supfri1 = parseInt(supfri1);
    supsat1 = parseInt(supsat1);
    supmon1 = parseInt(supmon1);
    suptue1 = parseInt(suptue1);
    supwed1 = parseInt(supwed1);
    supthu2 = parseInt(supthu2);
    supfri2 = parseInt(supfri2);
    supsat2 = parseInt(supsat2);
    supmon2 = parseInt(supmon2);
    suptue2 = parseInt(suptue2);
    supwed2 = parseInt(supwed2);

    //calculate total value  
    var total = supthu1 + supfri1 + supsat1 + supmon1 + suptue1 + supwed1 + supthu2 + supfri2 + supsat2 + supmon2 + suptue2 + supwed2;

    //print value to  PicExtPrice 
    document.getElementById("PicExtHours").value = total;

}

这是一个JSFiddle来演示。 @Fnatte确实提供了一个更清晰的替代方案，但我仍然认为（为了您的理解）解释为什么您的原始代码不起作用是值得的。

希望这有帮助！如果您有任何问题，请告诉我。

Answer 2

您发布的代码尝试使用每个元素的属性 options 。但该属性仅适用于select elements。您选择的元素的类型为 input 。

您还有一些变量命名问题。例如，请参阅代码的这一部分：

var supthu1 = elt.options[elt.selectedIndex].value;

// Then later :
supthu1 = parseInt(supthu1a); // <-- supthu1a is not defined

为了进一步改进代码，我使代码重复性降低。而不是多次编写parseInt，最好使用loop。

＆＃13;

＆＃13;

function calculateTime(){

  // Creating an array of all time field IDs
  var timeFieldIds = [
         "supthu1a", "supfri1a", "supsat1a", "supmon1a", 
         "suptue1a", "supwed1a", "supthu2a", "supfri2a",
         "supsat2a", "supmon2a", "suptue2a", "supwed2a"
  ];
  
  var total = 0;

  // Looping over the array of IDs
  for(var i = 0; i < timeFieldIds.length; i++) {
        // For each ID:

        // Select the element
        var el = document.getElementById(timeFieldIds[i]);

        // Get the value of the element and parse it as a integer.
        // " || 0" will make all invalid integers into zeroes.
        var val = parseInt(el.value) || 0;

        // Increase the total value
        total += val;
  }
  
  //print value to  PicExtPrice 
  document.getElementById("PicExtHours").value = total;

}

＆＃13;

<FORM Name="Timesheet">
		
<form action='' method='post'>
<p><label>Name</label><br><input type='text' name='name' value=''></p> 
<p><label>Employee Number:</label><br><input type='text' name='empnumber' value=''></p> 
<p><label>Department</label><br><input type='text' name='dept' value=''></p> 
<p><label>Pay Period Ending</label><br><input type='text' name='ppend' value=''></p> 
<br>
<p>
	
	<label>Support</label>
	<br>
	<label>Thu</label><input type='number' name='supthu1' onChange="calculateTime()" id="supthu1a" maxlength="3" size="3" value=''>
	<label>Fri</label><input type='number' name='supfri1' onChange="calculateTime()" id="supfri1a" maxlength="3" size="3" value=''>
	<label>Sat</label><input type='number' name='supsat1' onChange="calculateTime()" id="supsat1a" maxlength="3" size="3" value=''>
	<label>Mon</label><input type='number' name='supmon1' onChange="calculateTime()" id="supmon1a" maxlength="3" size="3" value=''>
	<label>Tue</label><input type='number' name='supteu1' onChange="calculateTime()" id="suptue1a" maxlength="3" size="3" value=''>
	<label>Wed</label><input type='number' name='supwed1' onChange="calculateTime()" id="supwed1a" maxlength="3" size="3" value=''>
	<label>Thu</label><input type='number' name='supthu2' onChange="calculateTime()" id="supthu2a" maxlength="3" size="3" value=''>
	<label>Fri</label><input type='number' name='supfri2' onChange="calculateTime()" id="supfri2a" maxlength="3" size="3" value=''>
	<label>Sat</label><input type='number' name='supsat2' onChange="calculateTime()" id="supsat2a" maxlength="3" size="3" value=''>
	<label>Mon</label><input type='number' name='supmon2' onChange="calculateTime()" id="supmon2a" maxlength="3" size="3" value=''>
	<label>Tue</label><input type='number' name='suptue2' onChange="calculateTime()" id="suptue2a" maxlength="3" size="3" value=''>
	<label>Wed</label><input type='number' name='supwed2' onChange="calculateTime()" id="supwed2a" maxlength="3" size="3" value=''>
</p> 
</FORM>
<button type="button" onclick="calculateTime()">Calculate</button>
Total Hours:<INPUT type="text" id="PicExtHours" Size=8>
	
<p><input type='submit' name='submit' value='Submit'></p> 
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

1

var elt = document.getElementById("supthu1a");
var supthu1 = elt.options[elt.selectedIndex].value;

supthu1a这里是一个输入标记，看起来你正在做的是获取选择/下拉框的值。

你需要的就是：

var elt = document.getElementById("supthu1a");
var supthu1 = elt.value;

2。 在//将数据转换为整数位，您正在使用supthu1a并尝试解析int。 supthu1a此时不存在，所以你为每一个都返回NaN。您需要删除每个末尾的尾随a：

supthu1 = parseInt(supthu1);
supfri1 = parseInt(supfri1);
//and so on

3。 其中每个都有onchange =“calculateTime（）”。这很好，除了当输入框中没有值时，该输入的parse int将返回NaN，并且您的添加将失败。这仅适用于每个框包含一个数字。 您可以通过多种方式纠正此问题，但最简单的方法可能是：

supthu1 = (!isNaN(parseInt(supthu1))? parseInt(supthu1):0);
supfri1 = (!isNaN(parseInt(supfri1))? parseInt(supfri1):0);
//and so on

4。 你在变量elt中做的最好的东西在JavaScript中是可以的，但它可能是其他语言中的问题，并且通常是避免的。你只需要声明一次var elt = something。在那之后，你可以用elt = something来重新分配它。更好的是，您可以通过将开头更改为以下格式来完全避免使用它：

var supthu1 = document.getElementById("supthu1a").value;
var supfri1 = document.getElementById("supfri1a").value;
//and so on

再说一次，你所拥有的是完全有效的，只是非常规的。

5。 这也是首选项，但是你可以省略onchange属性，如果你喜欢每个输入标签，并在javascript中用几行代替它：

//Plain JavaScript
window.onload = function(){
    var inputs = document.querySelectorAll('input[type=number]');
    for(var i = 0; i < inputs.length; i++){
        inputs[i].addEventListener('change', function(){calculateTime();});
    }
}

//jQuery way of things
$(document).ready(function(){
    $('input[type=number]').change(function(){calculateTime();})};
});

6。 最后一件小事 - 您为每个输入指定size =“3”。不同浏览器及其可能的字体设置的大小不一致。我知道，因为这是没有风格的（到目前为止，无论如何）它并不重要，但据我所知，这是不好的做法。通常，您会在css中看到输入大小设置为100％宽度，并为输入定义父div的宽度以显示该字段应该有多宽。 Bootstrap遵循这种方法。

所以，总之，我们有：

 
window.onload = function(){
    var inputs = document.querySelectorAll('input[type=number]');
    for(var i = 0; i < inputs.length; i++){
	    inputs[i].addEventListener('change', function(){calculateTime();});
    }
}

function calculateTime(){

  //Get selected data  
  var supthu1 = document.getElementById("supthu1a").value;
  var supfri1 = document.getElementById("supfri1a").value;
  var supsat1 = document.getElementById("supsat1a").value;
  var supmon1 = document.getElementById("supmon1a").value;
  var suptue1 = document.getElementById("suptue1a").value;
  var supwed1 = document.getElementById("supwed1a").value;
  var supthu2 = document.getElementById("supthu2a").value;
  var supfri2 = document.getElementById("supfri2a").value;
  var supsat2 = document.getElementById("supsat2a").value;
  var supmon2 = document.getElementById("supmon2a").value;
  var suptue2 = document.getElementById("suptue2a").value;
  var supwed2 = document.getElementById("supwed2a").value;
  
  //convert data to integers
  supthu1 = (!isNaN(parseInt(supthu1))? parseInt(supthu1):0);
  supfri1 = (!isNaN(parseInt(supfri1))? parseInt(supfri1):0);
  supsat1 = (!isNaN(parseInt(supsat1))? parseInt(supsat1):0);
  supmon1 = (!isNaN(parseInt(supmon1))? parseInt(supmon1):0);
  suptue1 = (!isNaN(parseInt(suptue1))? parseInt(suptue1):0);
  supwed1 = (!isNaN(parseInt(supwed1))? parseInt(supwed1):0);
  supthu2 = (!isNaN(parseInt(supthu2))? parseInt(supthu2):0);   
  supfri2 = (!isNaN(parseInt(supfri2))? parseInt(supfri2):0);
  supsat2 = (!isNaN(parseInt(supsat2))? parseInt(supsat2):0);
  supmon2 = (!isNaN(parseInt(supmon2))? parseInt(supmon2):0);
  suptue2 = (!isNaN(parseInt(suptue2))? parseInt(suptue2):0);	
  supwed2 = (!isNaN(parseInt(supwed2))? parseInt(supwed2):0);
   
  //calculate total value  
  var total = supthu1+supfri1+supsat1+supmon1+suptue1+supwed1+supthu2+supfri2+supsat2+supmon2+suptue2+supwed2; 
  
  //print value to PicExtPrice 
  document.getElementById("PicExtHours").value=total;
}

<FORM Name="Timesheet">
		
<form action='' method='post'>
<p><label>Name</label><br><input type='text' name='name' value=''></p> 
<p><label>Employee Number:</label><br><input type='text' name='empnumber' value=''></p> 
<p><label>Department</label><br><input type='text' name='dept' value=''></p> 
<p><label>Pay Period Ending</label><br><input type='text' name='ppend' value=''></p> 
<br>
<p>
	
	<label>Support</label>
	<br>
	<label>Thu</label><input type='number' name='supthu1' id="supthu1a" maxlength="3" size="3" value=''>
	<label>Fri</label><input type='number' name='supfri1' id="supfri1a" maxlength="3" size="3" value=''>
	<label>Sat</label><input type='number' name='supsat1' id="supsat1a" maxlength="3" size="3" value=''>
	<label>Mon</label><input type='number' name='supmon1' id="supmon1a" maxlength="3" size="3" value=''>
	<label>Tue</label><input type='number' name='supteu1' id="suptue1a" maxlength="3" size="3" value=''>
	<label>Wed</label><input type='number' name='supwed1' id="supwed1a" maxlength="3" size="3" value=''>
	<label>Thu</label><input type='number' name='supthu2' id="supthu2a" maxlength="3" size="3" value=''>
	<label>Fri</label><input type='number' name='supfri2' id="supfri2a" maxlength="3" size="3" value=''>
	<label>Sat</label><input type='number' name='supsat2' id="supsat2a" maxlength="3" size="3" value=''>
	<label>Mon</label><input type='number' name='supmon2' id="supmon2a" maxlength="3" size="3" value=''>
	<label>Tue</label><input type='number' name='suptue2' id="suptue2a" maxlength="3" size="3" value=''>
	<label>Wed</label><input type='number' name='supwed2' id="supwed2a" maxlength="3" size="3" value=''>
</p> 
</FORM>
<button type="button" onclick="calculateTime();">Calculate</button>
Total Hours:<INPUT type="text" id="PicExtHours" Size=8>
	
<p><input type='submit' name='submit' value='Submit'></p> 
</form>