使用Javascript循环将文本重复输出到.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是未定义的“当您访问它时。你的变量是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>

​

Answer 2

loopcount++;应该在CamelCase中，就像您在第一次var loopCount = 0;中定义的那样：

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>

​