Question

我正在计算3名员工的工资。我有一个表格的每个员工的小时输入。我不知道如何为一个按钮分配多个功能，所以我有两个按钮，每个按钮都有一个功能。

似乎没有为表格中的值分配变量“hours1，hours2，hours3”。

我尝试了几种不同的方法将表单输入分配给值，但我无法使其工作。我总是得到“员工1工作未定义小时，并获得 NaN 工资。”对于我所有的答案变量。

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Wage Calculator</title>
</head>

<body>

<script type="text/javascript">

var hours1, hours2, hours3; 

var wages1 = (hours1 * wages) + ((hours1 % 40) * (wages *1.5)); 

var wages2 = (hours2 * wages) + ((hours2 % 40) * (wages *1.5));

var wages3 = (hours3 * wages) + ((hours3 % 40) * (wages *1.5));

var wages = 12;

var answer1 = "Employee 1 worked " + hours1 + " hours and earned " + wages1    + " wages.";

var answer2 = "Employee 2 worked " + hours2 + " hours and earned " + wages2 + " wages.";

var answer3 = "Employee 3 worked " + hours3 + " hours and earned " + wages3 + " wages.";


// function used to set the value input by user to variables
function setValue() {
//document.forms["myForm"]["hours1"].value;
var hours1 = document.getElementByName("hrs1")[0].value;
//document.forms["myForm"]["hours2"].value;
document.getElementById('hrs2').value = hours2;
//document.forms["myForm"]["hours3"].value;
document.getElementById('hrs3').value = hours3;
//return hours1, hours2, hours3;

}
// function that was to be used as a button for displaying the results
function displayResults() {

document.writeln(answer1);
document.writeln(answer2);
document.writeln(answer3);


}


</script>
<!-- Form to make user input and presentation much nicer -->
<form name="myForm">
<fieldset>
    <legend>Hours Employees worked:</legend>
    Employee 1:<br>

    <input id="hrs1" type="text" name="hours1"> <br>

    Employee 2:<br>

    <input id="hrs2" type="text" name="hours2"> <br>

    Employee 3:<br>

    <input id="hrs3" type="text" name="hours3"> <br>

    <input type="button" value="Confirm" onclick="setValue()">


</fieldset>
</form>

<button type="button" onclick="displayResults()">click</button>

</body>

</html>

Answer 1

将脚本块放在底部，然后在脚本运行时你的html表单就会存在。

每个元素都将从左到右，从上到下读取。当你的javascript代码运行时，html输入还不存在。

Answer 2

    function setAndCalculateValue() {;
      var hours1, hours2, hours3, wages1, wages2, wages3, answer1, answer2, answer3;
      var wages = 12;

      hours1 = document.getElementById("hrs1").value || 0;
      hours2 = document.getElementById('hrs2').value || 0;
      hours3 = document.getElementById('hrs3').value || 0;

      wages1 = (hours1 * wages) + ((hours1 % 40) * (wages * 1.5));
      wages2 = (hours2 * wages) + ((hours2 % 40) * (wages * 1.5));
      wages3 = (hours3 * wages) + ((hours3 % 40) * (wages * 1.5));

      answer1 = "Employee 1 worked " + hours1 + " hours and earned " + wages1 + " wages.";
      answer2 = "Employee 2 worked " + hours2 + " hours and earned " + wages2 + " wages.";
      answer3 = "Employee 3 worked " + hours3 + " hours and earned " + wages3 + " wages.";
      document.getElementById("result").innerHTML = answer1 + "<br/ > " + answer2 + " <br /> " + answer3;


    }

<html>

<head>
  <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
  <title>Wage Calculator</title>
</head>

<body>


  <!-- Form to make user input and presentation much nicer -->
  <form name="myForm">
    <fieldset>
      <legend>Hours Employees worked:</legend>
      Employee 1:
      <br>

      <input id="hrs1" type="text" name="hours1">
      <br>Employee 2:
      <br>

      <input id="hrs2" type="text" name="hours2">
      <br>Employee 3:
      <br>

      <input id="hrs3" type="text" name="hours3">
      <br>
    </fieldset>
  </form>

  <input type="button" value="calc and show result" onclick="setAndCalculateValue();" />
  <br>

  <div id="result">
  </div>

</body>

</html>

由于工资的计算是在文件加载后立即完成的，因此将其设置为NaN，将小时1设置为未定义。

var wage1 =（hours1 * wage）+（（hours1％40）*（工资* 1.5））;

此时小时1和工资都未定义因此工资1是NaN

您应该计算函数内的所有内容，并从displayResults（）中调用它。

我添加了一个工作示例，稍作修改，例如 - 避免使用全局变量。

Answer 3

您在首次运行代码时分配answer1，answer2和answer3，并且不要在setValue函数中重新分配它们。一种可能的解决方案是添加：

answer1 = "Employee 1 worked " + hours1 + " hours and earned " + wages1    + " wages.";

answer2 = "Employee 2 worked " + hours2 + " hours and earned " + wages2 + " wages.";

answer3 = "Employee 3 worked " + hours3 + " hours and earned " + wages3 + " wages.";

在setValue函数的底部，没有var，因为您正在更改某个全局变量的值。

HTML表单到Javascript变量，而不是分配

3 个答案: