Jump to content
Killersites Forums

Javascript ch7 while loop problem


Recommended Posts

Hi everyone,

I need some help regarding the topic of while loop mentioned in ch7 lesson3. I'm stuck for first time in this course. Till now everything was super easy, but now I really don't understand what's going on in this loop.

There is that loop:

var loopCount = 5;

				while(loopCount > 0) {

						var target = document.getElementById("target");
						target.innerHTML = "LoopCount: " + loopCount + "<br>" + target.innerHTML;
						console.log("LoopCount is now: " + loopCount);
						loopCount = loopCount -1;
					}

In console result looks like this:

LoopCount is now: 5
LoopCount is now: 4
LoopCount is now: 3
LoopCount is now: 2
LoopCount is now: 1
End loop

but in html it starts from 1 to 5, why?:

LoopCount: 1
LoopCount: 2
LoopCount: 3
LoopCount: 4
LoopCount: 5

I don't understand that line:

target.innerHTML = "LoopCount: " + loopCount + "<br>" + target.innerHTML;

Since in the beginning variable loopCount is set to 5, why in html it starts with 1. Where is it come from?

Thanks

 

 

Link to post
Share on other sites
5 hours ago, rebelsoul777 said:

Ok, Stefan, thanks for your time.

I think I get it now. I had to think that while loop over.

It's 2:30 in the morning right now, so I guess I might be crazy.  :)

Hi. Cool that you got it on your own.

As far as code posting, I believe with this new forum software, you have to you use code options in the editor.

Stef

Link to post
Share on other sites
  • 1 year later...
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Ch7 JavaScript Loops</title>
<!--

Nerd term: data = information.

databases = bases of data, big collections information

-	

Type of loops in JS: while, do/while, for, for/in

Nerd term: evaluate the condition!

-->
		<script>
			

			function doItAgain() {



				var loopCount = 3;

				while(loopCount > 0) {
					var target = document.getElementById("target");
					target.innerHTML = "LoopCount " + loopCount + ' <br> ' + target.innerHTML
					console.log("The loopCount is now: " + loopCount);
					
					console.log(target.innerHTML);

					loopCount = loopCount - 1;
				}

			}

		</script>

	

	</head>
	<body>

		<h1>Looping can make your code spin!</h1>
		<input type="button" id="looper" value="Do it again!">
		<p id="target"></p>

		

	<script>
		document.getElementById("looper").onclick=function(){
			doItAgain();
			this.style.color = "blue";
		}
	</script>
	</body>
</html>

Hey Stef!

He got it in the middle of the night, but l'm having trouble understanding it in the middle of the day, 3rd day in a row.

Here is the HTML code.

I also added a line of code --> console.log(target.innerHTML); before the  --> loopCount = loopCount - 1; just so it shows it in the console as well. It seems to be the same case  there, but it doesn't even get rid of the previous iteration. And it prints out the <br> as well. 

 

Thanks

 

Link to post
Share on other sites

image.thumb.png.44af56e67b2366b95959522aaf940847.png

This is the output. I'm expecting it to be the same as the console output, but it isn't. In the browser it starts from --> LoopCount: 1, and in the console it starts from --> LoopCount is now: 5. It's interesting that if we put the --> inner.HTML right after the equals sign, the output is the same in the browser as well as in the console:

The code:

while(loopCount > 0) {

						var target = document.getElementById("target");
						target.innerHTML = target.innerHTML + "LoopCount: " + loopCount + "<br>";
						console.log("LoopCount is now: " + loopCount);
						console.log(target.innerHTML);
						loopCount = loopCount -1;
					}

And this is the output with the updated code:image.thumb.png.7de891fa8ed5de76db53045d53f56a3b.png

I don't know how important it is for me to understand this right now. If it isn't all that big of a deal I can just forget about it, but till now everything was super easy and clear. 

And by the way thanks for the awesome course. U R THE MAN Steff (If it is you actually answering these questions haha). I''ve been jumping from Coursera to Udemy to FreeCodeCamp for months before I found ur videos on Youtube and consequently bought ur webstack course. Thanks again.

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...