CODEWITHSUNDEEP
javascripthtmldomwhile-loop
Shawn R.
Shawn R.

Reputation: 161

Output text to .innerHTML repeatedly using Javascript while loop

I'm learning how to use while loops, and although I more or less have the concept down I'm having some trouble getting a while loop to write text repeatedly to an html element.

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>

From what I understand, .innerHTML += text should copy the inner text of an HTML element, and add new text to it, however I haven't been able to make this work in a loop.

Raw Javascript solutions only please.

Upvotes: 1

Views: 1917

Answers (2)

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

The loopcount++; should be in CamelCase like you've defined in the first time var loopCount = 0; :

loopCount++;

Else it will be considered as undefined variable loopcount.

Hope this helps.

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>

Upvotes: 3

Scott Marcus
Scott Marcus

Reputation: 65806

As the error message says "loopcount is undefined" when you access it. Your variable is loopCount. Remember: JavaScript is case-sensitive.

Also, yes, you should convert the user input from the prompt to a number. You can do a comparison without doing this, but it is a good best-practice in case you decide to do other math with the value later on in code.

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>

Upvotes: 2

Related Questions