为什么我无法在 dom 中得到 pascal tri 的结果

Question

我试图通过 onclick 事件进行三帕斯卡练习，但结果仍未定义 好像我不知道如何调用函数。

        var call = function() {
            var numberOfRows = document.getElementById('Niveaux').value;;
            document.getElementById('result2').innerHTML = generate(numberOfRows);
            document.getElementById('result1').innerHTML = 'Triangle de pascal a '+numberOfRows+' Niveau';
        };

        var generate = function (numberOfRows) {
            //numberOfRows = document.getElementById('Niveau').value
            let triangle = [[1], [1,1]]
            if (numberOfRows === 0){
                return []
            }else if(numberOfRows == 1){
                return [[1]]
            }else if (numberOfRows == 2){
                return [[1], [1,1]]
            }else {
                for (var i = 2; i < numberOfRows; i++) {
                    addRow(triangle)
                }

            }

        };

        var addRow = function (triangle) {
            let previous = triangle[triangle.length - 1]
            let newRow = [1]
            for (var i = 0; i < previous.length - 1; i++) {
                let current = previous[i]
                let next = previous[i+1]
                newRow.push(current + next)
            }
            newRow.push(1)
            return triangle.push(newRow)
        }

  <p>Niveau tri de pascal : <input type="text" id="Niveaux" value="10"></p>
    <button onclick="call()">Calcules</button><hr>
    <h3 id="result1"></h3>
    <p id="result2"></p>

Answer 1

为什么我无法在 dom 中得到 pascal tri 的结果？

因为当用户输入的numberOfRows大于2，即3、4、5等时，else部分被执行

else {
   for (var i = 2; i < numberOfRows; i++) {
      addRow(triangle);
   }

}

函数addRow 的返回值未被使用。而是将函数的结果保存在变量中，然后返回。

注意 - triangle.push(newRow); -> push 函数返回数组的新长度。

function call() {
  var numberOfRows = document.getElementById('Niveaux').value;;
  document.getElementById('result2').innerHTML = generate(numberOfRows);
  document.getElementById('result1').innerHTML = 'Triangle de pascal a ' + numberOfRows + ' Niveau';
};

var generate = function(numberOfRows) {
  numberOfRows = +(document.getElementById('Niveaux').value);
  let triangle = [
    [1],
    [1, 1]
  ]
  if (numberOfRows === 0) {
    return [];
  } else if (numberOfRows == 1) {
    return [
      [1]
    ];
  } else if (numberOfRows == 2) {
    return [
      [1],
      [1, 1]
    ]
  } else {
    for (var i = 2; i < numberOfRows; i++) {
      result = addRow(triangle);
      return result;
    }
  }
  return numberOfRows;
};

var addRow = function(triangle) {
  let previous = triangle[triangle.length - 1];
  let newRow = [1];
  for (var i = 0; i < previous.length - 1; i++) {
    let current = previous[i];
    let next = previous[i + 1];
    newRow.push(current + next);
  }
  newRow.push(1);
  triangle.push(newRow);
  return triangle;
}

<p>Niveau tri de pascal : <input type="text" id="Niveaux" value="10"></p>
<button onclick="call()">Calcules</button>
<hr>
<h3 id="result1"></h3>
<p id="result2"></p>

--编辑--

function call() {
  var numberOfRows = document.getElementById('Niveaux').value;;
  generate(numberOfRows);
  document.getElementById('result1').innerHTML = 'Triangle de pascal a ' + numberOfRows + ' Niveau';
};

var generate = function(numberOfRows) {
  numberOfRows = +(document.getElementById('Niveaux').value);
  let triangle = [
    [1],
    [1, 1]
  ]
  if (numberOfRows === 0) {
    return [];
  } else if (numberOfRows == 1) {
    return [
      [1]
    ];
  } else if (numberOfRows == 2) {
    return [
      [1],
      [1, 1]
    ]
  } else {
    for (var i = 2; i < numberOfRows; i++) {
      addRow(triangle);
    }
  }
  printRow(triangle);
};

var addRow = function(triangle) {
  let previous = triangle[triangle.length - 1];
  let newRow = [1];
  for (var i = 0; i < previous.length - 1; i++) {
    let current = previous[i];
    let next = previous[i + 1];
    newRow.push(current + next);
  }
  newRow.push(1);
  triangle.push(newRow);
  return triangle;
}

const printRow = function(rows) {
  let pascalRow = "";
  for (let row of rows) {
    pascalRow += `${row.join(' ')} <br>`;
  }
  document.body.querySelector('#result2').innerHTML = pascalRow;
}

<p>Niveau tri de pascal : <input type="text" id="Niveaux" value="10"></p>
<button onclick="call()">Calcules</button>
<hr>
<h3 id="result1"></h3>
<p id="result2"></p>