Question

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

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

根据我的理解，.innerHTML += text 应该复制HTML元素的内部文本，并为其添加新文本，但是我还没有能够完成这项工作在循环中。

仅限原始Javascript解决方案。

Answer 1

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

loopCount++;

否则，它将被视为 undefined 变量loopcount。

希望这有帮助。

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

正如错误消息所示＆＃34; loopcount未定义＆＃34;当你访问它。您的变量是loopCount。 请记住：JavaScript区分大小写。

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

＆＃13;

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;

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: