使用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++;

否则，它将被视为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 is undefined”。 您的变量是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>