JavaScript表格显示不正确

我正在为班级做作业，我觉得我可能只是有一些简单的语法错误。我试图在JS中创建的表格根本不显示在名为result的HTML div中。JavaScript表格显示不正确

https://imgur.com/a/fawJT（这是与分配方向上的输出例子）

http://imgur.com/a/Khh0h（我的代码是我们在按下计算所有投入将消失，DIV结果功课接口RAN空缺）

function link_events() { 

    document.getElementById("calculate").onclick = calculate; 

} 
function calculate() { 

     var years = document.getElementById('years'); 
     var population = parseInt(document.getElementById('population').value); 
     var rate = parseInt(documet.getElementById('rate').value); 

     var table = '' + 
        '<table>' + 
         '<tr>' + 
          '<th><strong>Year</strong></th>' + 
          '<th><strong>Population</strong></th>' + 
          '<th><strong>Change</strong></th>' + 
         '</tr>' + 
       ''; 


       var currentYear = 2017; 

       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 += '' + 
        '</table>' + 
       ''; 




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

HTML

<!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="calculate"> </div> 

</div> 
</form> 

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


</body> 
</html>

来源

2017-04-09 Ryan Reeves

你能告诉我们结果你有没有正当的说“没有正确显示”或提供一个笨蛋？ – Sorikairo

它根本没有显示表格 –

我会尝试上传截图 –

我认为问题在于，例如，当您打电话给document.getElementById('population')时，您从未设置名称为的输入的id。尝试像这样改变它：

Current Population: <input type="text" value="<? print $_POST['population']; ?>" name="population" id="population"> <br/> <br/>

来源

2017-04-09 15:06:27

我想你可能想直接使用html元素而不是动态构建一个字符串表。你可以事先定义表格元素，然后从那里操作它 - 它只是更干净。

HTML

<table id='calTable'> 
    <tr> 
     <th><strong>Year</strong></th> 
     <th><strong>Population</strong></th> 
     <th><strong>Change</strong></th> 
    </tr> 
    </table>

的Javascript

function calculate() { 

    var years = document.getElementById('years'); 
    var population = parseInt(document.getElementById('population').value); 
    var rate = parseInt(documet.getElementById('rate').value); 
    var currentYear = 2017; 

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

      AppendTableCell(i, population, change); 

     } 
} 


function AppendTableCell(num, population, change) 
{ 
    var row = document.getElementById("calTable").insertRow(0); 
    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    var cell3 = row.insertCell(2); 
    cell1.innerHTML = num; 
    cell2.innerHTML = population.toFixed(); 
    cell3.innerHTML = change.toFixed(); 
}

来源

2017-04-09 15:09:03

您最初的问题是，你永远不会运行link_events（）;在你的主HTML中，所以onclick事件永远不会分配给按钮。

在您

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

添加

<script> 
link_events(); 
</Script>

或者只是把它直接添加到按钮。

替换该行

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

与

<div> 
<button id="calculate" onclick="link_events(); return false;"></button> 
</div>

希望这将有助于你进一步调试了一下。

来源

2017-04-09 17:19:44

JavaScript表格显示不正确

回答

相关问题