Question

我正在研究这个小项目，该项目具有一个功能，当单击“计算”按钮并计算总工资（包括水电费，租金和税费）时，就会调用该功能。我已经准备了函数和html表单，但是我无法在相应的文本框中显示值而不是总薪水。

<head>
    <script type="text/javascript">
    function SalCal(){
        var sal=document.getElementById("bsTxt");

            if(sal.value == "" || sal.value.length < 0) 
            {
                alert("Basic Salary is missing");
            }
            else if(sal.value != "" || sal.value.length > 0)
            {
                var u = sal * 0.1;
                var r = sal * 0.08;
                var t = sal * 0.02;
                document.getElementById("uti").value = u;
                document.getElementById("h_rent").value = r;
                document.getElementById("tax_p").value = t;
                var calTotal = (u + r) - t;

                document.getElementById("total_sal").value = calTotal;
            }
        }

    </script>
</head>
<body>
    <div>
    <h1>Employee Salary Calculator</h1>
    </div><br /> 
    <br />
    <div>
        <h3>Welcome to online salary calculator</h3>
    </div><br />
    <br />

    <form>
        Employee ID:
        <input type="text" name="EmpId" value="BC123456789">
        <span class="note">*Suppose your own VUID is as EmployeeID</span>
        <br>
        EmployeeName:
        <input type="text" name="EmpName" value="Ali Javed">
        <br>
        Father Name:
        <input type="text" name="FName" value="Javed Ahamed">
        <br>
        Gender:
        <input type="radio" name="gender" value="male">Male<br>
        <input type="radio" name="gender" value="female" checked>Female<br>
        CNIC:
        <input type="tel" name="cnic" value="33100-8565814-1" pattern="[0-9]{5}-[0-9]{7}-[0-9]{1}" required>
        <span class="note">*Eg:12345-0123456-1</span>
        <br>
        Basic Salary*:
        <input type="number" name="salary" value="" id="bsTxt" required><br>
        Utilities*:
        <input type="number" name="utility" id="uti" ><br>
        House Rent*:
        <input type="number" name="rent" id="h_rent"> <br>
        Tax Percentage*:
        <input type="number" name="tax" id="tax_p"><br>
        Total Salary*:
        <input type="number" name="totalSalary" id="total_sal"><br>

        <input type="submit" value="Calculate" onclick="SalCal()">
        <br>
        <input type="submit" value="Reset">


    </form>
</body>

Answer 1

var sal=document.getElementById("bsTxt");在这里，您正在得到一个对象。

但是这里var u = sal * 0.1;您试图将数字和对象相乘。

您应该首先获取该值。代码应类似于

var u = sal.value * 0.1;
var r = sal.value * 0.08;
var t = sal.value * 0.02;

并通过添加e.preventDefault();或 <form onsubmit='javascript:return false;'>

Answer 2

事物的结合

sal是一个字符串，请使用parseInt将其转换为数字，否则您将无法进行乘法运算，这将导致NaN
提交表单时，请使用事件对象和e.preventDefault提交表单并进行操作

function SalCal(e) {
  e.preventDefault();
  var sal = parseInt(document.getElementById("bsTxt").value, 10);

  if (sal == "") {
    alert("Basic Salary is missing");
  } else if (sal != "") {
    var u = sal * 0.1;
    var r = sal * 0.08;
    var t = sal * 0.02;
    document.getElementById("uti").value = u;
    document.getElementById("h_rent").value = r;
    document.getElementById("tax_p").value = t;
    var calTotal = (u + r) - t;
    document.getElementById("total_sal").value = calTotal;
  }
}

<div>
  <h1>Employee Salary Calculator</h1>
</div><br />
<br />
<div>
  <h3>Welcome to online salary calculator</h3>
</div><br />
<br />

<form>
  Employee ID:
  <input type="text" name="EmpId" value="BC123456789">
  <span class="note">*Suppose your own VUID is as EmployeeID</span>
  <br> EmployeeName:
  <input type="text" name="EmpName" value="Ali Javed">
  <br> Father Name:
  <input type="text" name="FName" value="Javed Ahamed">
  <br> Gender:
  <input type="radio" name="gender" value="male">Male<br>
  <input type="radio" name="gender" value="female" checked>Female<br> CNIC:
  <input type="tel" name="cnic" value="33100-8565814-1" pattern="[0-9]{5}-[0-9]{7}-[0-9]{1}" required>
  <span class="note">*Eg:12345-0123456-1</span>
  <br> Basic Salary*:
  <input type="number" name="salary" value="" id="bsTxt" required><br> Utilities*:
  <input type="number" name="utility" id="uti"><br> House Rent*:
  <input type="number" name="rent" id="h_rent"> <br> Tax Percentage*:
  <input type="number" name="tax" id="tax_p"><br> Total Salary*:
  <input type="number" name="totalSalary" id="total_sal"><br>

  <input type="submit" value="Calculate" onclick="SalCal(event)">
  <br>
  <input type="reset" value="Reset">


</form>

Answer 3

var u = sal * 0.1;
var r = sal * 0.08;
var t = sal * 0.02;

将sal替换为sal.value。

还可以使用添加debugger;来帮助轻松调试这些问题。在这里可以了解更多相关信息-https://code.i-harness.com/en/q/4eae24

Answer 4

问题出在var u = sal * 0.1;这行中，而sal是字符串。

如下更改代码：

    function SalCal(){
        var sal=document.getElementById("bsTxt");

            if(sal.value == "" || sal.value.length < 0) 
            {
                alert("Basic Salary is missing");
            }
            else if(sal.value != "" || sal.value.length > 0)
            {
                // var u = sal * 0.1;
                // var r = sal * 0.08;
                // var t = sal * 0.02;
                var u = parseInt(sal.value)  * 0.1;
                var r = parseInt(sal.value)  * 0.08;
                var t = parseInt(sal.value)  * 0.02;
                document.getElementById("uti").value = u;
                document.getElementById("h_rent").value = r;
                document.getElementById("tax_p").value = t;
                var calTotal = (u + r) - t;

                document.getElementById("total_sal").value = calTotal;
                return false; 
            }
        }

<div>
    <h1>Employee Salary Calculator</h1>
    </div><br /> 
    <br />
    <div>
        <h3>Welcome to online salary calculator</h3>
    </div><br />
    <br />

    <form>
        Employee ID:
        <input type="text" name="EmpId" value="BC123456789">
        <span class="note">*Suppose your own VUID is as EmployeeID</span>
        <br>
        EmployeeName:
        <input type="text" name="EmpName" value="Ali Javed">
        <br>
        Father Name:
        <input type="text" name="FName" value="Javed Ahamed">
        <br>
        Gender:
        <input type="radio" name="gender" value="male">Male<br>
        <input type="radio" name="gender" value="female" checked>Female<br>
        CNIC:
        <input type="tel" name="cnic" value="33100-8565814-1" pattern="[0-9]{5}-[0-9]{7}-[0-9]{1}" required>
        <span class="note">*Eg:12345-0123456-1</span>
        <br>
        Basic Salary*:
        <input type="number" name="salary" value="" id="bsTxt" required><br>
        Utilities*:
        <input type="number" name="utility" id="uti" ><br>
        House Rent*:
        <input type="number" name="rent" id="h_rent"> <br>
        Tax Percentage*:
        <input type="number" name="tax" id="tax_p"><br>
        Total Salary*:
        <input type="number" name="totalSalary" id="total_sal"><br>

        <input type="button" value="Calculate" onclick="SalCal()">
        <br>
        <input type="submit" value="Reset">


    </form>

我无法在文本框中显示值和结果

4 个答案: