How do I make this javascript in loop?

Question

Sorry, I'm new in Javascript. I don't know how to make this looping in Javascript. This is my fiddle, that is so ugly because there's no loop there. I made it in PHP, but i don't know how to make loop like that in javascript. This is my code in PHP:

<?php
    $username='michel jackson';
    for($a=1;$a<=2;$a++){
        echo "
            <div id='bigbox'>
        ";
        for($b=1;$b<=$a;$b++){
            echo "
                <div class='colkiri'>
                    <div class='colkirichild'></div>
                </div>
            ";
        }
        echo "
            <div class='colkanan'>
                    <div class='colkananchild'>
                        <div id='username'>
                            <span class='usernamechild'><img src='http://images2.fanpop.com/images/photos/7600000/Bad-michael-jackson-7647469-1787-2560.jpg' width='15' height='15' class='bayangan'></img> $username</span> <span class='countdown'>5 minutes ago</span>
                        </div>
                        <div id='comment'>
                            <div class='commentchild'>Michael Joseph Jackson was born on August 29, 1958. He was the eighth of ten children in an African-American working-class family who lived in a two-bedroom house on Jackson Street in Gary, Indiana, an industrial city and a part of the Chicago metropolitan area.[12][13] His mother, Katherine Esther Scruse, was a devout Jehovah's Witness.</div>
                            <div id='reportthis'>
                                <span id='idreply' onclick='clickreply(this)'>reply</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        ";
    }
?>

I'm trying to convert into javascript like this fiddle, but it doesn't worked yet. I don't know how to use loop in Javascript. Thanks.

this is my javasript code, that I don't make it:

var c=[1,2];
var z,y,x,w,a,b;
function mj1(){
    mj2();
    document.getElementById("showup").innerHTML='????';//<- which one? i don't know how to choose the variable 
}
function mj2(){
    username='michel jackson';
    for(a=1;a<=c.length;a++){
        z="<div id='bigbox'>"+
        for(b=1;b<=c.length;b++){
            y[b]="<div class='colkiri'>"+
                "<div class='colkirichild'></div>"+
            "</div>";
        }
        x="<div class='colkanan'>"+
                "<div class='colkananchild'>"+
                    "<div id='username'>"+
                        "<span class='usernamechild'><img src='http://images2.fanpop.com/images/photos/7600000/Bad-michael-jackson-7647469-1787-2560.jpg' width='15' height='15' class='bayangan'></img> username</span> <span class='countdown'>5 minutes ago</span>"+
                    "</div>"+
                    "<div id='comment'>"+
                        "<div class='commentchild'>Michael Joseph Jackson was born on August 29, 1958. He was the eighth of ten children in an African-American working-class family who lived in a two-bedroom house on Jackson Street in Gary, Indiana, an industrial city and a part of the Chicago metropolitan area.[12][13] His mother, Katherine Esther Scruse, was a devout Jehovah's Witness.</div>"+
                        "<div id='reportthis'>"+
                            "<span id='idreply' onclick='clickreply(this)'>reply</span>"+
                        "</div>"+
                    "</div>"+
                "</div>"+
            "</div>"+
        "</div>";
    }
}

Not be be touchy, but wouldn't be easier and faster to look for javascript loops in Google than making a question in SO and waiting for an answer? — Amarnasan, Nov 13 '15 at 08:47
@lukassteiner, I've tried also in .php with but the result is same, just blank page. — Juna serbaserbi, Nov 13 '15 at 08:53
When you get a blank page, check this: http://stackoverflow.com/questions/1475297/phps-white-screen-of-death — lukassteiner, Nov 13 '15 at 08:54
Another question: why are you trying to do this in Javascript? ;-) — Matheno, Nov 13 '15 at 08:56
@MHakvoort because i couldn't put my php script in JSFiddle MHakvoort, so it forced me have to learn javascript also. — Juna serbaserbi, Nov 13 '15 at 09:02
What kind of loop is it you want, and what the loop supposed to do? — Zorken17, Nov 13 '15 at 10:04
I want like [this](http://jsfiddle.net/junaserbaserbi/t6x8w6av/) Zorken, but there's a loop inside there like my php above. — Juna serbaserbi, Nov 13 '15 at 10:06
But why do you need a loop, you are setting a static value. With a loop you looo through a set of data or do somthing meny times. I dont see why you need a loop here. — Zorken17, Nov 13 '15 at 10:21
because there are two of **
**, **
**,**
** in [this](http://jsfiddle.net/junaserbaserbi/t6x8w6av/) Zorken, if there's a loop then the code is not much anymore, like mine in php — Juna serbaserbi, Nov 13 '15 at 10:30

score 2 · Accepted Answer · answered Nov 13 '15 at 08:56

2

This is your PHP-loop in javascript. Pretty much the same... Just remember to use the <script> javascript code here </script> tag to tell the browser that this is javascript

for (a = 1; a < 2; a++) { 
    //Your stuff inside here
}

To append HTML to a div you can use the following code:

document.getElementById('divID').innerHTML = '<p>your data here</p>';

Or if you include Jquery as well it can be done even simpler:

$('#divID').append('<p> your data here </p>');

answered Nov 13 '15 at 08:56

Ørjan

2,749
2
16
24

I can't use JQuery @baerten, I'm trying to use your solution in Javascript barten – Juna serbaserbi Nov 13 '15 at 09:10
I've tried in this [fiddle](http://jsfiddle.net/junaserbaserbi/t6x8w6av/3/), It's still not working, where is the mistake @barten? – Juna serbaserbi Nov 13 '15 at 09:19
I created a short example here. I don't have time to write the whole thing unfortunately, but it should give you an idea of how to use the different components. Click the Show Button to see it in action: http://jsfiddle.net/t6x8w6av/5/ – Ørjan Nov 13 '15 at 09:42
this is from your code @barten, [Fiddle](http://jsfiddle.net/junaserbaserbi/t6x8w6av/6/). I can't not make it yet, because there's **for loop** inside **
**. How is it @barten? – Juna serbaserbi Nov 13 '15 at 10:04
Start with the basics and understand how a for-loop is working: http://www.w3schools.com/js/js_loop_for.asp @Junaserbaserbi – Zorken17 Nov 13 '15 at 10:06
I have learning now Zorken, but my case is different, i need **for** among **
**. So that **
** will be splitted. How's to handle it Zorken? – Juna serbaserbi Nov 13 '15 at 10:39
Finally i find the way Baerten, because of your way, so become like [this](http://jsfiddle.net/junaserbaserbi/t6x8w6av/7/), thanks for your clues, I give you +1 @baerten. – Juna serbaserbi Nov 13 '15 at 11:12

score 1 · Answer 2 · answered Nov 13 '15 at 08:53

1

In Javascript:

for(var a = 1; a <= 2; a++){
        // do stuff
        for(var b = 1; b <= a; b++){
            // do stuff
        }
//do stuff
}

answered Nov 13 '15 at 08:53

tRx

815
1
15
24

I have tried your code in this [fiddle](http://jsfiddle.net/junaserbaserbi/t6x8w6av/2/), but I'm still not make it. @tR4xX – Juna serbaserbi Nov 13 '15 at 09:08
1

Finally i find the way tR4xX, because of your way also, so become like [this](http://jsfiddle.net/junaserbaserbi/t6x8w6av/7/), thanks for your clues, I give you +1 @tR4xX. – Juna serbaserbi Nov 13 '15 at 11:13

How do I make this javascript in loop?

2 Answers2

Linked