CODEWITHSUNDEEP
javascripthtml
haloawan
haloawan

Reputation: 13

For-Loop with JavaScript, got 1 inc number that not in loop

I am new in JavaScript. I am trying to make a for-loop, I am looking to get an output with the numbers from 1 to 20 each on a new line with the corresponding string attached to it. But, the output is showing number 21. Any advice?

This is my code:

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    </head>
    
    <body>
        <h3>Soal No. 2</h3>
        <div id="jawaban2"></div>
        <script>
            var jawaban2;
            for (var jawaban2 = 1; jawaban2 <= 20; jawaban2++) {
                if (jawaban2 % 2 === 0) {
                    document.write(jawaban2 + " = Berkualitas" + ("<br/>"))
                } else if (jawaban2 % 3 === 0) {
                    document.write(jawaban2 + " = I Love Koding" + ("<br/>"))
                } else {
                    document.write(jawaban2 + " = Santai" + ("<br/>"))
                }
            }
            console.log(jawaban2);
            document.getElementById("jawaban2").innerHTML = jawaban2
        </script>
    </body>
    
    </html>

Upvotes: 0

Views: 77

Answers (3)

KooiInc
KooiInc

Reputation: 122946

The last iteration (jawaban2 += 1) is executed and jawaban2 now has value 21. The loop re-enters, an now the value reaches the case jawaban2 <= 20. So the loop is ended. But jawaban2 is already executed. That's why printing jawaban2 after the loop shows 21.

You can declare jawaban2 within the loop (for (let jawaban2 = 1; ...).

If you need jawaban2 after the loop however and you want its value to be the maximum of the loop (20), you should first subtract 1 from it before further use.

Or you can use variable scope (see MDN), something like:

let jawaban2 = 20;

for (let jawaban2 = 1; jawaban2 <= 20; jawaban2 += 1) {
  //                                   ^ for clarity
  if (jawaban2 % 2 === 0) {
      console.log(jawaban2 + " = Berkualitas")
  } else if (jawaban2 % 3 === 0) {
      console.log(jawaban2 + " = I Love Koding")
  } else {
      console.log(jawaban2 + " = Santai")
  }
}
// scope of jawaban2 within the loop is local
// for the loop, so outer jawaban2 is still 20
console.log(jawaban2);
.as-console-wrapper { top: 0; max-height: 100% !important; }

Upvotes: 1

Goran Stoyanov
Goran Stoyanov

Reputation: 2311

Do it like this:

<!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
    
    </head>
    
    <body>
        <h3>Soal No. 2</h3>
        <div id="jawaban2"></div>
        <script>
            var content = "";
            for (var jawaban2 = 1; jawaban2 <= 20; jawaban2++) {
                if (jawaban2 % 2 === 0) {
                    content += jawaban2 + " = Berkualitas" + "<br/>";
                } else if (jawaban2 % 3 === 0) {
                    content += jawaban2 + " = I Love Koding" + "<br/>";
                } else {
                    content += jawaban2 + " = Santai" + "<br/>";
                }
            }
            document.getElementById("jawaban2").innerHTML = content
        </script>
    </body>
    
    </html>

Upvotes: 0

Sandesh Sapkota
Sandesh Sapkota

Reputation: 798

You can do like this

for (let jawaban2 = 1; jawaban2 <= 20; jawaban2++) {

    if (jawaban2 % 2 === 0) {
        document.write(jawaban2 + " = Berkualitas" + ("<br/>"))
    } else if (jawaban2 % 3 === 0) {
        document.write(jawaban2 + " = I Love Koding" + ("<br/>"))
    } else {
        document.write(jawaban2 + " = Santai" + ("<br/>"))
    }

    if(jawaban2 === 20) {
        document.getElementById("jawaban2").innerHTML = jawaban2
    }
}

Upvotes: 1

Related Questions