Question

您好我无法将我的javascript文件连接到html。我尝试编码所有内容，现在我无法看到HTML的变化。我在这里试图计算员工的税率，他们的加班工作与税收减免。

提前致谢。请帮忙。

我的html代码是

    <!doctype html>
  <html>
<head>
    <script language="JavaScript" src="employees.js"></script>
    <link rel="stylesheet" type="text/css" href="employees.css" />
    <title>Pay Form</title>
</head>
<body>
    <section id="content">
        <h1>
            Employee Payroll Entry Form
        </h1>
        <div id="payForm">
            <p>
                <label for="fullName">Full Name:</label><input type="text" autofocus id="fullName" />
            </p>
            <p>
                <label for="hoursWorked">Hours Worked:</label><input type="text" id="hoursWorked" />
            </p>
            <p>
                <label for="hourlyRate">Hourly Rate:</label><input type="text" id="hourlyRate" />
            </p>
            <footer>
                <button id="calculateButton" onclick="calculate()">Calculate</button>
            </footer>
        </div>
        <h1>
            Employee Payroll Summary Report
        </h1>

        <table id = "employees">
            <tr>
                <th>Employee Name</th>
                <th>Gross Pay</th>
                <th>Tax</th>
                <th>Net Pay</th>
            </tr>
        </table>
    </section>
</body>

我的 javascript

    var fname = document.getElementById("fullName");
    var hours = document.getElementById("hoursWorked");
    var rate = document.getElementById("hourlyRate");
    var table = document.getElementById("employees");
    var gross;
    var net;
    var tax;
    var overtime;

    function grosspay() {
if (hours > 0 && hours < 40) {
    gross = hours * rate;
} else if (hours < 40) {
    overtime = hours - 40;
    gross = (40 * rate) + (overtime * (rate * 1.5));
}
    }
    function taxPay() {
if (gross < 250) {
    tax = gross * 0.25;
} else if (gross >= 250 && gross < 500) {
    tax = gross * 0.30;
} else if (gross >= 500 && gross < 750) {
    tax = gross * 0.40;
} else if (gross > 750) {
    tax = gross * 0.50;
}
    }
    function netPay() {
net = gross - tax;
    }

    function calculate() {
if (hours > 0) 
{
    var row = table.insertRow();
    var fnamecell = row.insertCell(0);
    var grossPaycell = row.insertCell(1);
    var taxCell = row.insertCell(2);
    var netPayCell = row.insertCell(3);

    grosspay();
    taxPay();
    netPay(); 


    fnamecell.innerHTML = fname;
    grossPaycell.innerHTML = grosspay;
    taxCell.innerHTML = tax;
    netPayCell.innerHTML = net;       
}
    }
     function load() {
var calculateButton = document.getElementById("calculateButtom");
calculateButton.addEventListener("click", calculate);
    }

Answer 1

你得到的是像“小时”这样的元素，但不是它的价值。

请尝试以下计算功能，如果仍有问题，请发布调试器输出，以便其他人可以帮助您。

function calculate() {
    var hoursValue = hours.value;
    console.log("Hours are : " + hoursValue );

    if (hoursValue > 0) 
    {
        var row = table.insertRow();
        var fnamecell = row.insertCell(0);
        var grossPaycell = row.insertCell(1);
        var taxCell = row.insertCell(2);
        var netPayCell = row.insertCell(3);

        grosspay();
        taxPay();
        netPay(); 


        fnamecell.innerHTML = fname;
        grossPaycell.innerHTML = grosspay;
        taxCell.innerHTML = tax;
        netPayCell.innerHTML = net;       
    }
}

Answer 2

你得到的是元素而不是它的价值。

获取输入字段的值，如：

var hours = document.getElementById("hoursWorked").value;
var rate = document.getElementById("hourlyRate").value;

并将脚本标记移动到body标签内页面的底部。

无法将我的javascript数据填充到HTML

2 个答案: