Question

我正在尝试创建一个双嵌套循环，它给自己添加一个数字，给定你希望它添加的实例数。

因此，当您在数字中输入内容时，例如＆＃34; 5＆＃34;你输入＆＃34; 3＆＃34;对于实例数，则打印以下内容：

5=5 
5+5=10 
5+5+5=15

有关JsFiddle

的更多信息

<div>
  <h2>Loop</h2>
  Number
  <input type='text' id='tbox'>
  <br>
  Number of Instances
  <input type='text' id='theNumber'> 

  <button onclick=doubleLoop;>
    Add Numbers.
  </button>
</div>
<div id="content">
</div>

<script>
    function doubleLoop(){
        var theText = document.getElementById('tbox').value;
        var theNumber = document.getElementById('theNumber').value;
        var content = document.getElementById('content');
        content.innerHTML = '';
        for (var i = 0; i < theNumber; i++) {
            content.innerHTML = content.innerHTML + (i + 1) + ')';
            //start of the second part of the Double Loop
            for (var j = 0; j < (i + 1); j++){
                if (i === 0){
                    content.innerHTML = content.innerHTML + theText + '=' + theText + '<br>';
                } else if (i > 0) {
                    content.innerHTML = content.innerHTML + theText.repeat(j) + '=' + (theText * (i+1));
                }
            }
        }
    }
</script>

Answer 1

首先要做的事情是：您将变量命名得非常差，很难理解您尝试做什么，特别是当您不直接说出您想要的内容时在问题中。 doubleLoop说明你的功能是如何工作的，而不是它的作用。 getMultiplicationProcess本来是一个更好的名字。此外，您可以将值作为参数传递，只返回结果，它看起来会更好。

无论如何，我无法想象你是如何努力实现这一目标的。我已经重命名了你的变量并按我的方式做了一切。永远不要命名变量theNumber或theText，因为这样做不会说明它所拥有的信息。您可以将它们命名为firstInput和secondInput，但即使这样也不明确。

在这里输入代码，向下滚动以获取解释：

var submit = document.getElementById("submit"),
    firstInput = document.getElementById("tbox"),
    secondInput = document.getElementById("theNumber"),
    answerField = document.getElementById("content");

submit.addEventListener("click", function () {
    answerField.innerHTML = getMultiplicationProcess(Number(firstInput.value), Number(secondInput.value), "<br/>");
});


function getMultiplicationProcess(multiplicand, multiplier, lineBreak) {
  var result = "";
  for (var i = 0; i < multiplier; ++i) {
    for (var j = 0; j < i + 1; ++j) {
      if (i === j) {
        result += multiplicand + " = " + (multiplicand * (i + 1));
      } else result += multiplicand + " + ";
    }
    result += lineBreak || "\n";
  }
  return result;
}

JSFiddle

<强>解释

外部for循环的运行次数与第二次输入的次数相同，或multiplier。因此，如果分别输入5和3，则此循环将运行三次。它表示结果字符串的每一行。

内循环的运行次数与外循环的当前迭代次数相同。因此，对于我们的示例输入，它将运行如下：

0: 1; 1: 2; 2: 3;

我用它将multiplicand多次放在当前行中。

第一行将包含一个5（不包括此乘法的答案），因此j为i + 1，这是1，因为在第一次迭代期间外循环i等于0：

5 = 5

第二行包含2 5 s，i为1，因为我们在外循环的第二次迭代中，所以j = i + 1 = 2这是怎么回事我们将在字符串中放置许多五个字符：

5 + 5 = 10

如果它是内循环的最后一次迭代，而不是将"5 + "添加到结果字符串，则会放置"5 = (i + 1) * multiplier"，这将是当前行的结果。然后内循环结束，外循环添加换行符并重新启动下一行的过程。

Answer 2

你去吧

<强> https://jsfiddle.net/mkarajohn/qkn2ef4L/

function createString(number, times) {
    /*
   * We will create each side of the equation separately and we will concatenate them at the end
   */
  var leftSide = '', 
      rightSide = '',
      i;

  for (i = 1; i <= times; i++) {
    leftSide += number.toString();
    if ((times > 1) && (i < times)) {
      leftSide += '+';
    }
  }
  rightSide = number * times

  return (leftSide + '=' + rightSide);
}

function loop(){
  // .value returns a string, so we make sure the values are converted to integers by calling parseInt()
  // See https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseInt
  var theText = parseInt(document.getElementById('tbox').value);
  var theNumber = parseInt(document.getElementById('theNumber').value);
  var content = document.getElementById('content');
  var output = '';

  content.innerHTML = '';

  for (var i = 1; i <= theNumber; i++) {
    output += createString(theText, i);
    output += '<br />'
  }

  content.innerHTML = output;
}

var button = document.getElementById('run');
run.addEventListener('click', loop);

如果有不明确的事情，请随时提出。

编辑：如果你真的想用两个嵌套循环来做这件事，那么它将如何发展：

function loop(){
  // .value returns a string, so we make sure the values are converted to integers by calling parseInt()
  // See https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/parseInt
  var theText = parseInt(document.getElementById('tbox').value);
  var theNumber = parseInt(document.getElementById('theNumber').value);
  var content = document.getElementById('content');
  var output = '';
  var leftSide = '', 
      rightSide = '';

  content.innerHTML = '';

  for (var i = 1; i <= theNumber; i++) {
    leftSide = '';
    for (var j = 1; j <= i; j++) {
      leftSide += theText.toString();
      if ((i > 1) && (j < i)) {
        leftSide += '+';
      }
    }
    rightSide = theText * i;
    output += (leftSide + '=' + rightSide);
    output += '<br />'
  }

  content.innerHTML = output;
}


var button = document.getElementById('run');
run.addEventListener('click', loop);

嵌套循环以添加数字

2 个答案: