HTML表单到Javascript变量，而不是赋值

HTML form to Javascript variables, not assigning

本文关键字：赋值 变量 表单 Javascript HTML      更新时间：2023-11-20

我正在计算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>


    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，hours1被设置为undefined。

var wages1=（小时1*工资）+（（小时1%40）*（工资*1.5））；

在这一点上，小时1和工资都是未定义的，因此工资1是NaN

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

我添加了一个工作示例，并做了一些小的更改，比如-避免使用全局变量。

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

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

在代码首次运行时分配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，因为您正在更改某个全局变量的值。

相关文章：