javascript - 我的数组的第一个元素没有显示

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>
	<input type="submit" value="Click here" onclick="showDuties(); return false;"> 
	  to see my top 
	<input type="text" id="pfJobs" />
	  job duties here.
	<p id = "pfj">
	</p>
</form>

Answer 1

因为您在将元素添加到 t 之前添加了该元素。您需要在之后移动它。更好的是，不要在每次迭代时更新它，而是在循环完成时更新它。

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