Jump to content
Killersites Community
rebelsoul777

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

 

 

Share this post


Link to post
Share on other sites

I'm trying to past some code but I get this error:

Forbidden

You don't have permission to access /community/index.php on this server.

Additionally, a 403 Forbidden error was encountered while trying to use an ErrorDocument to handle the request.

Share this post


Link to post
Share on other sites

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.  :)

Edited by rebelsoul777

Share this post


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

Share this post


Link to post
Share on other sites
<!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

 

Share this post


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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×