Question

我正在尝试构建一个简单的薪水计算器，该薪水计算器会从基本薪水中扣除某些百分比，然后在该输入元素中显示该值，但该值不起作用，并且我不确定是什么问题。也许我的变量没有初始化，因为当我在控制台中检查变量值时运行该程序后，它说该变量未定义。

在调试过程中，已正确计算了值，但最终未将其放入输入元素中。这可能是一个愚蠢的错误，但是我尽了一切努力，但似乎无法使它起作用。任何指导都会有所帮助

function salCal() {
  var salary = document.forms[0][6].value;
  var utilities = document.forms[0][7].value;
  var houseRent = document.forms[0][8].value;
  var tax = document.forms[0][9].value;
  var totalSalary = document.forms[0][10].value;

  if (salary == "") {
    window.alert("Basic Salary Missing");
  }

  utilities = 10 / 100 * salary;
  houseRent = 8 / 100 * salary;
  tax = 2 / 100 * salary;
  totalSalary = salary - (utilities + houseRent + tax);

}

<center>
  <h1>Employee Salary Calculator</h1>

  <form>
    <table>

      <tr>
        <td>Employee ID</td>
        <td> <input type="text" value=""></td>
      </tr>

      <tr>
        <td>Employee Name</td>
        <td><input type="text" value=""></td>
      </tr>

      <tr>
        <td>Father Name</td>
        <td><input type="text" value=""></td>
      </tr>

      <tr>
        <td>Gender</td>
      </tr>

      <tr>
        <td>
          Male
        </td>
        <td>
          <input type="radio" name="gender" checked>
        </td>
      </tr>
      <tr>
        <td>
          Female
        </td>
        <td>
          <input type="radio" name="gender">
        </td>
      </tr>

      <tr>
        <td>CNIC</td>
        <td><input type="text" value=""></td>
      </tr>

      <tr>
        <td>Basic Salary*</td>
        <td><input type="number" name="sal"></td>
      </tr>

      <tr>
        <td>Utilities*</td>
        <td><input type="number" disabled></td>
      </tr>

      <tr>
        <td>House Rent*</td>
        <td><input type="number" disabled></td>
      </tr>

      <tr>
        <td>Tax Percentage*</td>
        <td><input type="number" disabled></td>
      </tr>

      <tr>
        <td>Total Salary*</td>
        <td><input type="number" disabled></td>
      </tr>

      <tr>
        <td>Tax Year</td>
        <td>
          <select>
            <option selected>2014</option>
            <option>2015</option>
            <option>2016</option>
            <option>2017</option>
            <option>2018</option>
          </select>
        </td>
      </tr>

      <tr>
        <td><input type="button" value="Calculate" onclick="salCal()"></td>
        <td><input type="button" value="Reset"></td>
      </tr>



    </table>
  </form>
</center>

Answer 1

变量的范围在函数salCal中。如果要在控制台中使用，请将变量放在全局范围之外

var salary, utilities, houseRent , tax , totalSalary  ;

function salCal() {
    salary = document.forms[0][6].value;
    utilities = document.forms[0][7].value;
    houseRent = document.forms[0][8].value;
    tax = document.forms[0][9].value;
    totalSalary = document.forms[0][10].value;

    if(salary == "") {
        window.alert("Basic Salary Missing");
    }

    utilities = 10/100*salary;
    houseRent = 8/100*salary;
    tax = 2/100*salary;
    totalSalary = salary - (utilities + houseRent + tax);

}

在调试过程中，正确计算了值，但最终没有放入输入元素

您需要将值分配回输入

document.forms[0][10].value = totalSalary ;

Answer 2

原因是因为您的变量在salCal()函数的范围内。这些变量可以在函数中访问，但是在函数结束时将被删除。要解决此问题，请在函数外部定义变量（作为占位符值），然后在函数内部提供实际值。

为什么我的Javascript变量未初始化？

2 个答案: