私の配列の最初の要素は表示されません

Question

これは私のJavaScriptコードです。私はブラウザの開発者ツールを使用してそれを段階的に実行すると、配列からすべての要素を取得しますが、最後の4点しか表示しません。どうすればこの問題を解決できますか？

function showDuties() { 
    var numDuties = document.getElementById('pfJobs').value; 
    var i = numDuties - 1 
    var t = "" 
    var pfDuties = ["Auditing", "Close out registers", "Clean free weights", 
     "Sign up new members", "File paperwork"] 

    while (i >= 0) { 
     document.getElementById('pfj').innerHTML = t; 
     t += pfDuties[i] + "<br>"; 
     i--; 
    } 
} 

<script> 
 

 
window.showDuties = function() { 
 
    var numDuties = document.getElementById('pfJobs').value; 
 
    var i = numDuties - 1 
 
    var t = "" 
 
    var pfDuties = ["Auditing", "Close out registers", "Clean free weights", 
 
     "Sign up new members", "File paperwork"] 
 

 
    while (i >= 0) { 
 
    document.getElementById('pfj').innerHTML = t; 
 
     t += pfDuties[i] + "<br>"; 
 
     
 
     i--; 
 
    } 
 
} 
 

 
</script> 
 

 

 
<form> 
 
\t <input type="submit" value="Click here" onclick="showDuties(); return false;"> 
 
\t to see my top 
 
\t <input type="text" id="pfJobs" /> 
 
\t job duties here. 
 
\t <p id = "pfj"> 
 
\t </p> 
 
</form>

Answer 1

あなたはtに追加する前に要素を追加しますので。あなたは後にそれを移動する必要があります。それでも、繰り返し実行するたびに更新するのではなく、ループが完了したときに更新することをお勧めします。

while (i >= 0) { 
    t += pfDuties[i] + "<br>"; 
    i--; 
} 
document.getElementById('pfj').innerHTML = t;