javaScript動的テーブル

私はちょうどjavascriptの学習を始めましたが、宿題に問題があります。この問題は、phpを使用してユーザー入力を取得します（入力は予測、人口、および成長率の年です）。 javascriptは（年、人口、および変更）の形式で表を生成する必要があります。javaScript動的テーブル

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)

出典

2017-04-08 Ryan Reeves

htmlにこのidの要素がないので、私は 'var years = document.getElementById（ 'years'）;'から始めるでしょう。どのようにプログラムがそれを見つけることができますか？ – jrook

また、コードを貼り付けるときに、問題をはっきりと示すコードの最小限のバージョンを貼り付けてみてください。たとえば、コード内の ''の行には、問題の原因となる別のスクリプトがあります。 – jrook

私は、あなたが望む結果とあなたのための一例をまとめました。

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

コード：

<!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>

結果：

説明：

ボタンをクリックすると発生するイベントリスナーを作成します。次に、必要なデータ（年、人口、レート）を取得し、データを検証してテーブルを作成します。テーブルの生成が完了するまで、テーブル全体を変数に格納し、idの結果をdivに配置します。

編集：コードを編集しました。現在は、&の純粋なjavascriptソリューションです。

出典

2017-04-08 19:45:14

前者はすべて計算と出力がjavascirptで行われるように頼まれましたありがとうございます。 –

しかし、なぜこれをphpやjavascriptとしてタグ付けしましたか？あなたは何のためにPHPをしますか？ –

私は非常に経験豊富なプログラマーではありません。 HTMLタグはおそらく、ユーザーの3つの入力がどこから取得されたのかより正確です。 –

答えて

関連する問題