Output text to .innerHTML repeatedly using Javascript while loop

Question

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.

Beware though that you need to ensure that the input is valid HTML; otherwise you'll run into trouble. — Mr Lister
– Mr Lister, Commented Feb 1, 2017 at 16:52

Zakaria Acharki · Accepted Answer · 2017-02-01 18:03:10Z

3

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>

edited Feb 1, 2017 at 18:03

answered Feb 1, 2017 at 16:38

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Scott Marcus · Accepted Answer · 2017-02-01 16:51:50Z

2

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>

edited Feb 1, 2017 at 16:51

answered Feb 1, 2017 at 16:39

Scott Marcus

66k6 gold badges54 silver badges81 bronze badges

2 Comments

Shawn R. Over a year ago

Well owl be damned. I've been staring at this for a good hour and didn't even notice a simple typo. Also, I'm aware of the parseInt() function from doing my own research however I'm don't quite understand the radix yet. (although it seems to work without it.)

Scott Marcus Over a year ago

@ShawnR. The "radix" is provided so that the JavaScript engine knows what base numeral system you are using. This is important because if the user's input begins with "0", the base system will be considered as octal (base 8) and if the string starts with "0x", hex (base 16) will be assumed. So by putting 10 in, you are telling the JS engine to get the number as a base 10 number.

Collectives™ on Stack Overflow

Output text to .innerHTML repeatedly using Javascript while loop

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related