使用 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++; 应该像您在第一次定义 var loopCount = 0; 时那样采用 CamelCase 格式：

loopCount++;

否则它将被视为undefined变量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>

Answer 2

当您访问它时，错误消息显示“loopcount 未定义”。你的变量是loopCount。 记住：JavaScript 区分大小写。

另外，是的，您应该将用户输入从prompt 转换为数字。您可以在不执行此操作的情况下进行比较，但如果您决定稍后在代码中使用该值进行其他数学运算，这是一个很好的最佳实践。

var text = prompt("What would you like logged to screen?");

// I may need to convert prompt output to a number
var repeatText = parseInt(prompt("How many times would you like to print the text?"), 10);

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>