javaScript动态表[关闭]

I've just started learning javascript and I'm having trouble with a homework problem. The problem gets user input via php (inputs are years to forecast, population, and growth rate). then the javascript should produce a table in the format of (years, population and change).

Example of output

<!doctype html>  
<META HTTPEQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">  
<meta httpequiv="expires" content="0" />  
<html lang="en">  
<head>  
    <title> hw8 </title>  
    <link rel="stylesheet" href="hw8.css">  
    <script src="hw8.js"></script> 
</head>  
<body>  
<form name="inputform"> 
    <div id="input">  
        <h2> Population Growth </h2>  
        Years to forecast: <input type="text" value="<? print $_POST['years']; ?>" name="years"> <br/> <br/>  
        Current Population: <input type="text" value="<? print $_POST['population']; ?>" name="population"> <br/> <br/>  
        Growth Rate: <input type="text" value="<? print $_POST['rate']; ?>" name="rate"> <br/> <br/>  
        <div id="button"> <input type="submit" value="Calculate" id="calc"> </div> 
    </div>  
</form> 

<div id="tables"> 
    <table id="table">
        <tr>
            <th> Year </th> <th> Population </th> <th> Change </th>
        <tr>
            <td> 2017 </td> <td> . </td> <td> . </td> 
        </tr>
    </table>
</div>
</body> 
</html>   
window.addEventListener("load", link_events, false);    
function link_events() { 
    document.getElementById("calc").onclick = calculate;    
}  
function calculate() {  
    var form = document.forms["inputform"];
    var year = 2017;
    var i;
    var years = document.getElementById('years');

    for (i=0; i < years.length; i++){
        year[i]++
    }

    var 
    var change = parseFloat(form)["population"] * (parseFloat(form)["rate"]/100)

I put together an example for you with the result you want.

JSFiddle: https://jsfiddle.net/0sfrrewc/

Code:

<!DOCTYPE html>
<html>
<head>
    <title>hw08 demo</title>

    <style type="text/css">
        div#errorContainer {
            max-width: 400px;
            margin-top: 20px;
            border: 1px solid #000;
            background-color: red;
            border-radius: 5px;
            padding: 10px;
        }

        div#errorContainer > span {
            color: white;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {

            /* Calculate click */
            document.getElementById('calculate').addEventListener('click', function() {

                /* Get years */
                var years = parseInt(document.getElementById('years').value);

                if (isNaN(years) || years <= 0) {
                    alert('Invalid year'); return;
                }

                /* Get population */
                var population = parseInt(document.getElementById('population').value);

                if (isNaN(population) || population <= 0) {
                    alert('Invalid population'); return;
                }

                /* Get rate */
                var rate = parseInt(document.getElementById('rate').value);

                if (isNaN(rate) || rate <= 0) {
                    alert('Invalid rate'); return;
                }

                /* Create table */
                var table = '' +
                    '<table>' + 
                        '<thead>' + 
                            '<th><strong>Year</strong></th>' +
                            '<th><strong>Population</strong></th>' +
                            '<th><strong>Change</strong></th>' +
                        '</thead>' +
                '';

                var currentYear = new Date().getFullYear();

                table += '' +
                        '<tbody>' +
                '';

                for (var i = currentYear; i < (currentYear+years); i++) {
                    var change = (population*rate)/100;
                    population += change;

                    table += '' +
                            '<tr>' + 
                                '<td>' + i + '</td>' +
                                '<td>' + population.toFixed() + '</td>' +
                                '<td>' + change.toFixed() + '</td>' + 
                            '</tr>' +
                    '';
                }

                table += '' +
                        '</tbody>' +
                    '</table>' +
                '';

                /* Display table */
                document.getElementById('result').innerHTML = table;
            });
        }

    </script>
</head>
<body>

    <h2>hw08 - Population Growth</h2>

    <br>

    <label for="years">Years to forecast:</label>
    <input type="number" id="years" />

    <br>

    <label for="population">Current Population:</label>
    <input type="number" id="population" />

    <br>

    <label for="rate">Growth Rate:</label>
    <input type="number" id="rate" />

    <br><br>

    <input type="submit" id="calculate" value="Calculate!" />

    <br><br>

    <div id="result"></div>

</body>
</html>

Result:

result

Explanation:

We create a event listener, thats being fired upon clicking the button. Then we fetch the necessary data (year, population and rate), we validate the data then we create the table. We store the entire table in a variable until we are done generating the table, then we place it inside the div with the id result.

EDIT: Edited the code, it's now a html & pure javascript solution.