javascript - 使用 Javascript while 循环将文本重复输出到 .innerHTML

Question

我正在学习如何使用 while 循环，虽然我或多或少地理解了这个概念，但我在使用 while 循环将文本重复写入 html 元素时遇到了一些麻烦。

var text = prompt("What would you like logged to screen?");
//I may need to convert prompt output to a number
var repeatText = prompt("How many times would you like to print the text?");
var loopCount = 0;

while (loopCount < repeatText) {
	//I want text to print out on screen "x" times, where x is equal to the numerical value of loopCount
  document.getElementById("outputHolder2").innerHTML += text;
  loopcount++;
}

//this isn't outputting to outputHolder1 after loop
document.getElementById("outputHolder1").innerHTML = loopCount;

#outputHolder1 {
  margin: 0px;
  padding: 10%;
  background-color: lightBlue;
  text-align: center;
  font-size: 20px;
  font-weight: 5;
}

#outputHolder2 {
  padding: 2% 10% 0% 10%;
}

<div>
  <p id="outputHolder1">
    NUMBER OF TIMES TO LOOP:
  </p>

  <p id="outputHolder2">

  </p>

</div>

据我了解，.innerHTML += text 应该 复制 HTML 元素的内部文本，并向其中添加新文本，但我还没有这样做能够使它循环工作。

请只使用原始 Javascript 解决方案。

Answer 1

loopcount++; 应该采用 CamelCase ，就像您在第一次定义时一样 var loopCount = 0; :

loopCount++;

否则它将被视为未定义变量loopcount。

希望这对您有所帮助。

var text = prompt("What would you like logged to screen?");
var repeatText = prompt("How many times would you like to print the text?");
var loopCount = 0;

while (loopCount < repeatText) {
  document.getElementById("outputHolder2").innerHTML += text;
  loopCount++;
}

document.getElementById("outputHolder1").innerHTML = loopCount;

#outputHolder1 {
  margin: 0px;
  padding: 10%;
  background-color: lightBlue;
  text-align: center;
  font-size: 20px;
  font-weight: 5;
}

#outputHolder2 {
  padding: 2% 10% 0% 10%;
}

<div>
  <p id="outputHolder1">
    NUMBER OF TIMES TO LOOP:
  </p>
  <p id="outputHolder2"></p>
</div>