你如何使用document.write（）创建一个动态网页，所以当你点击一个按钮时，它会显示一个结果页面，就像在这个视频中一样

时间：2018-04-01 23:41:01

标签： javascript html

https://youtu.be/5IA8tzjPqqw

这是我到目前为止所做的：我正在尝试使用“处理”按钮从文本框中获取输入并返回一个页面，其结果与视频中的结果类似。谢谢！

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Payroll Processing Program</title> <!--Jason Kim Section 17 -->
    <style>
        body{background-color:lightgray}
        h1{text-align: center; color: lightblue; background-color: white}
        h2{text-align: center; color: lightblue; background-color: white}

    </style>
</head>
<body>
    <h1>Payroll Processing</h1>
    <h2>Report Generator</h2>
    <hr>
    <script>
    var Department, Salary;
    var ID1, HrWorked1, HrlySal1;
    var ID2, HrWorked2, HrlySal2;
    var ID3, HrWorked3, HrlySal3;

    function Processing(Sal){
    document.write(Department);
    if (HrWorked1 <= 40){
        Sal=HrWorked1 * HrlySal1;
        }
    else {Sal=HrWorked1 * (HrlySal1 * 1.5);
    }
        return Sal;
    document.write("Department Overtime Salaries:" Sal);
    }
    </script>

    <form name="PayrollProcessing">
    Department: <input type="text" id="deptName" value="" size="10" onchange="Department=deptName.value"/>
    <hr>
    <pre>       ID        Hours Worked  Hourly Salary</pre>
    Employee 1: <input type="text" id="EmpID1" value="" size="10" onchange="ID1=EmpID1.value"/>
    <input type="text" id="HrWorked1" value="" size="10" onchange="Hr1=HrWorked1.value"/>
    <input type="text" id="HrlySal1" value="" size="10" onchange="Sal1=HrlySal1.value"/>
    <br>
    Employee 2: <input type="text" id="EmpID2" value="" size="10" onchange="ID2=EmpID2.value"/>
    <input type="text" id="HrWorked2" value="" size="10" onchange="Hr2=HrWorked2.value"/>
    <input type="text" id="HrlySal2" value="" size="10" onchange="Sal2=HrlySal2.value"/>
    <br>
    Employee 3: <input type="text" id="EmpID3" value="" size="10" onchange="ID3=EmpID3.value"/>
    <input type="text" id="HrWorked3" value="" size="10" onchange="Hr3=HrWorked3.value"/>
    <input type="text" id="HrlySal3" value="" size="10" onchange="Sal3=HrlySal3.value"/>
    <hr>

    <button onclick="Processing(Salary)">Process</button>
    <button onclick="formClear()">Clear</button>

</body>
</html>

感谢任何可以提供帮助的人！非常赞赏：）

1 个答案:

答案 0 :(得分：0)

您的代码中的问题

您错过了+ document.write("Department Overtime Salaries:" Sal);您需要将其更改为document.write("Department Overtime Salaries:" + Sal);
我认为Salary

Procesing()

document.write("Department Overtime Salaries:" + Sal);之后您return。 return之后的代码将不会被处理。您只需删除return Sal;
Processing()中使用的变量名称错误。您为Hr1 = HrWorked1.value声明了onchange，但在HrWorked1中使用了Processing()。您应该使用Hr1代替。

修复后，您应该可以在函数中使用输入。您只需使用HTML标记数据。

使用上述修复

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Payroll Processing Program</title> <!--Jason Kim Section 17 -->
    <style>
        body{background-color:lightgray}
        h1{text-align: center; color: lightblue; background-color: white}
        h2{text-align: center; color: lightblue; background-color: white}

    </style>
</head>
<body>
    <h1>Payroll Processing</h1>
    <h2>Report Generator</h2>
    <hr>
    <script>
    var Department, Salary;
    var ID1, HrWorked1, HrlySal1;
    var ID2, HrWorked2, HrlySal2;
    var ID3, HrWorked3, HrlySal3;

    function Processing(){
    document.write("<h2>Department: "+Department+"</h2>");
    if (HrWorked1 <= 40){
        Sal=Hr1 * Sal1;
        }
    else {Sal=Hr1 * (Sal1 * 1.5);
    }
    document.write("<h3>Department Overtime Salaries: " + Sal+"</h3>");
    }
    </script>

    <form name="PayrollProcessing">
    Department: <input type="text" id="deptName" value="" size="10" onchange="Department=deptName.value"/>
    <hr>
    <pre>       ID        Hours Worked  Hourly Salary</pre>
    Employee 1: <input type="text" id="EmpID1" value="" size="10" onchange="ID1=EmpID1.value"/>
    <input type="text" id="HrWorked1" value="" size="10" onchange="Hr1=HrWorked1.value"/>
    <input type="text" id="HrlySal1" value="" size="10" onchange="Sal1=HrlySal1.value"/>
    <br>
    Employee 2: <input type="text" id="EmpID2" value="" size="10" onchange="ID2=EmpID2.value"/>
    <input type="text" id="HrWorked2" value="" size="10" onchange="Hr2=HrWorked2.value"/>
    <input type="text" id="HrlySal2" value="" size="10" onchange="Sal2=HrlySal2.value"/>
    <br>
    Employee 3: <input type="text" id="EmpID3" value="" size="10" onchange="ID3=EmpID3.value"/>
    <input type="text" id="HrWorked3" value="" size="10" onchange="Hr3=HrWorked3.value"/>
    <input type="text" id="HrlySal3" value="" size="10" onchange="Sal3=HrlySal3.value"/>
    <hr>

    <button onclick="Processing()">Process</button>
    <button onclick="formClear()">Clear</button>

</body>
</html>