"For Loops Video" Question

Javascript Programming
#1

Hey guys,

I’ve just watched Ivan’s video on “Loops in Javascript.” In it his loops fall one line below each other instead of one loooong line of outputs. As far as I can tell he achieves this by using headings (h1 and h2) and the + symbol. Could you elaborate on this?

Now, I’ve tried to loop my loops without headings, but try as I might I can’t get them to fall one beneath each other. This is the code I’ve written.

var textToDisplay = “Wazzup”;

          for (var counter = 0; counter < 100; counter++) {

            document.write(textToDisplay);​

          }

When I execute it I get a long line of Wazzups instead of one beneath the other. As soon as I wrap the variable in headings the code outputs one line beneath the other.

So I have two questions:

  1. Is there something magical about headings that makes the code execute on separate lines? (this question ties up with the one above)

and

  1. How can I write the code so that my outputs fall on separate lines without using headings?

I hope I made sense and thanks to anyone who can help me!

Regards

Emmerich

3 Likes
#2

Hello sir, you probably just want to add “line break” into the code.
Here is an example so you can check it yourself.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Emmerich</title>
  </head>
  <body>
    <h1>wasaaaa</h1>
    <button type="button" onclick="wasa()">Start. </button>
    <script>
      function wasa(){
        var textToDisplay = "Wazzup";
          for (var counter = 0; counter < 100; counter++){
            document.write(textToDisplay);
            document.write('<br/>');
          }
      }
    </script>
  </body>
</html>

Also, a link so you can understand a little bit more about the subject: HTML
Tag

Hope you find this useful! :slight_smile:

If you have any doubt, please let us know so we can help you!

Carlos Z.

2 Likes
#3

Hi @Emmerich,

You’re asking really good questions :+1:

I can see @thecil has already given you a really nice detailed answer to your second question…

Answer: Use <br>

I thought I’d just add something which may help you understand why adding HTML heading tags gives you the separate lines, whereas if you don’t use them you get one long line (unless you use <br> which is another valid alternative).

The for loop you are using is writing text (content) to a document that needs to be marked up using HTML in order for it to have any structure. Without any HTML tags, any text you write to it, will just appear in one long continuous line (which is what you were getting).

By default, the browser automatically renders certain HTML elements, such as headings, on separate lines. This is why…

<h1>Wasaaaaap!<h1>
<!-- or -->
<h2>Wasaaaaap!<h2>

…will always appear on a separate line by default, without having to indicate a line break with <br> .

As you are using JavaScript to manipulate the Document Object Model, you need to include any HTML tags in quotes (because they are part of an element which is coded in JavaScript as a string value). Within this string you can then include your text by reference to its variable name, using string concatenation with the + operator.

Just adding another line of code with '<br>' is probably easier, but hopefully you can now see why you can achieve the same result in one line using any of the heading tags.

2 Likes
#4

@jon_m @thecil

Cool, thanks a lot guys. Appreciate you taking the time to help me out. Your answers helped.

2 Likes