createElement創建無限循環

Question

我對javascript和編碼一般還是很陌生，我不明白為什么這會導致無限循環：

  let newTr = document.createElement('tr');

如果將其取出，則網頁可以很好地加載，但是如果保留它，則網頁將永遠不會完全加載，並且瀏覽器會使用50％的CPU。

這是我其余的代碼：

// client-side js
// run by the browser each time your view template referencing it is loaded

console.log('hello world :o');

let arrPfcCases = [];

// define variables that reference elements on our page

const tablePfcCases = document.getElementById("tablePfcCases");
const formNewPfcCase = document.forms[0];
const caseTitle = formNewPfcCase.elements['caseTitle'];
const caseMOI = formNewPfcCase.elements['caseMOI'];
const caseInjuries = formNewPfcCase.elements['caseInjuries'];

// a helper function to call when our request for case is done
const  getPfcCaseListener = function() {
  // parse our response to convert to JSON
  arrPfcCases = JSON.parse(this.responseText);

  // iterate through every case and add it to our page
  for (var i = 0; i = arrPfcCases.length-1;i++) {
    appendNewCase(arrPfcCases[i]);
  };
}

// request the dreams from our app's sqlite database
const pfcCaseRequest = new XMLHttpRequest();
pfcCaseRequest.onload = getPfcCaseListener;
pfcCaseRequest.open('get', '/getDreams');
pfcCaseRequest.send();

// a helper function that creates a list item for a given dream
const appendNewCase = function(pfcCase) {
  if (pfcCase != null) {
  tablePfcCases.insertRow();
  let newTr = document.createElement('tr');
  for (var i = 0; i = pfcCase.length - 1; i++) {
    let newTd = document.createElement('td');
    let newText = document.createTextNode(i.value);
    console.log(i.value);
    newTd.appendChild(newText);
    newTr.appendChild(newTd);
  }

  tablePfcCases.appendChild(newTr);
  }
}

// listen for the form to be submitted and add a new dream when it is
formNewPfcCase.onsubmit = function(event) {
  // stop our form submission from refreshing the page
  event.preventDefault();
  let newPfcCase = [caseTitle, caseMOI, caseInjuries];
  // get dream value and add it to the list
  arrPfcCases.push(newPfcCase);
  appendNewCase(newPfcCase);

  // reset form 
  formNewPfcCase.reset;

};

謝謝！

PS：代碼中可能還有很多其他錯誤，在弄清楚這一點之前，我無能為力！

Answer 1

作為說明，在您的代碼中

i = pfcCase.length - 1

將pfcCase.length - 1的值分配給i 。 該循環部分的語法應為

在每次循環迭代之前要計算的表達式。 如果此表達式的值為true，則執行語句。

對代碼的評估沒有任何意義。

評估

i < pfCase.length

在每次迭代之前檢查當前索引是否小於數組的長度，但是工作正常。

Answer 2

這里沒有條件語句。 在此語句中，您將pfcCase長度減1分配給I變量。

for (var i = 0; i = pfcCase.length - 1; i++) {

您必須將i變量與pfcCase的長度減去1進行比較。

這應該工作。

for (var i = 0; i < pfcCase.length - 1; i++) {

注意到別的東西

這條線沒有按照您認為的劑量行事。

let newText = document.createTextNode(i.value);

我只是指數，即數字。 它沒有value屬性。

這就是您想要做的。

let newText = document.createTextNode(pfcCase[i].value);

我的偏好（forEach）

我更喜歡使用數組forEach方法。 它更干凈，更不容易出錯。

pfcCase.forEach( function(val){
    let newTd = document.createElement('td');
    let newText = document.createTextNode(val.value);
    console.log('The array element is. '. val.value, ' The value is. ', val.value);
    newTd.appendChild(newText);
    newTr.appendChild(newTd);
  });