JQuery - nested loop issue

Question

I have created a javascript that runs when the user change the dropdown list (Note: the change function, and the way we get the value of the dropdown list work fine), I have tested the function multiple times and found the issue is my second For-loop I am really stuck wondering why it does not work.

$(document).ready(function(){
        var username = prompt("Please enter your Username", "default");
        console.log("User: ",username);

        $.ajax({ url : "/memory/intro",
                type: "POST",
                data: JSON.stringify({"username": username}),
                contextType: "text/json; charset=utf-8",
                success : function(){console.log("Done!");}});

        $("#lvl").change( function (){
                var diff = $(this).find("option:selected").attr('value');
                console.log(diff); //Personal testing
                console.log(typeof(diff)); //Personal testing
                for(var i=0; i < diff; ++i){
                        var row;
                        row = $("<tr></tr>");
                        for(var x=0; i < diff; ++x) {
                                var col;
                                col = $("<div></div>");
                                col.addClass("card");
                                col.data("col", x);
                                row.append(col);
                        }
                        $("#cards").append(row);
                };

        });

});

Note: If we comment the second for-loop the whole code works fine and we append the "tr" and "div" with the class name

for(var x=0; i < diff; ++x) { should maybe be for(var x=0; x < diff; ++x) { (i.e. the stop condition depends on x, rather than i) — nbrooks
– nbrooks, Commented Mar 6, 2017 at 20:07
In your second loop you use i < diff;, shouldn't it be with an x x < diff; — Asons
– Asons, Commented Mar 6, 2017 at 20:08
If this is the case, where change to x fix it, please consider delete this post as it is a simple typo issue — Asons
– Asons, Commented Mar 6, 2017 at 20:09
Thanks @nbrooks the code seemed so fine, I think I need glasses — AyeJay
– AyeJay, Commented Mar 6, 2017 at 20:12

AyeJay · Accepted Answer · 2017-03-06 20:11:17Z

1

Sadly I didn't realise that I had i < diff on the second loop, thanks to @nbrooks

answered Mar 6, 2017 at 20:11

AyeJay

4591 gold badge4 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nebulosar · Accepted Answer · 2017-03-06 20:10:19Z

0

second forloop try:

      for(var x=0; x < diff; ++x) {
            var col;
            col = $("<td></td>");
            col.addClass("card");
            col.data("col", x);
            row.append(col);
      }

So far as i know you shouldn't append a div to a tr, it causes errors (not js errors, but it are still markup errors)

check w3c validator if you want to be sure of this issue,

answered Mar 6, 2017 at 20:10

Nebulosar

1,8873 gold badges23 silver badges48 bronze badges

Collectives™ on Stack Overflow

JQuery - nested loop issue

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related