JavaScript-Tabelle nicht richtig angezeigt

Ich arbeite an einer Hausaufgabe für den Unterricht und ich habe das Gefühl, ich habe vielleicht nur einen einfachen Syntaxfehler. Die Tabelle, die ich in meinem JS erstellen wollte, wird im HTML-Div-Ergebnis nicht angezeigt.JavaScript-Tabelle nicht richtig angezeigt

https://imgur.com/a/fawJT (dies ist ein Beispiel für die Ausgabe mit Anweisungen für die Zuordnung)

http://imgur.com/a/Khh0h (mein Code ran beim Drücken berechnen in unsere Hausaufgaben-Schnittstelle sind alle Eingänge verschwinden und die div Ergebnisse bleibt leer)

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>

Quelle

2017-04-09 Ryan Reeves

Können Sie uns das Ergebnis zeigen, das Sie haben, wenn Sie juste sagen "nicht richtig angezeigt" oder bieten Sie einen Plünderer? – Sorikairo

Es wird überhaupt keine Tabelle angezeigt –

Ich werde versuchen, einen Screenshot hochzuladen –

Ich denke, das Problem ist, während Sie zum Beispiel document.getElementById('population') aufrufen, setzen Sie nie die id der Eingabe, deren Name ist population. Versuchen Sie es wie folgt zu ändern:

Quelle

2017-04-09 15:06:27

Ich denke, Sie möchten das HTML-Element direkt verwenden, anstatt eine String-Tabelle dynamisch zu erstellen. Dazu definieren Sie das Tabellenelement im Voraus und manipulieren es von dort aus - es ist einfach sauberer.

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(); 
}

Quelle

2017-04-09 15:09:03

Ihr erstes Problem ist, dass Sie nie link_events laufen(); in Ihrem Haupt-HTML, so dass das onclick-Ereignis niemals der Schaltfläche zugewiesen wird.

Unter Ihrer

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

<script> 
link_events(); 
</Script>

hinzufügen oder einfach direkt auf die Schaltfläche hinzufügen.

diese Linie

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

mit

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

ersetzen Hoffentlich Sie ein bisschen weiter debuggen helfen.

Quelle

2017-04-09 17:19:44

JavaScript-Tabelle nicht richtig angezeigt

Antwort

Verwandte Themen