CODEWITHSUNDEEP
javascriptjquerycsshtmlstring-length
Stamenov
Stamenov

Reputation: 11

Dynamically added div with length = 0?

so I am trying to check if I already added the a div with the same id and if I did, I chage its color to red. But for some reason my divs have a length of 0 and the if clause is never true.

I've been doing some research and this is very often due to a float, but I don't have one. I am just positionting my divs absolutely and appending them to the body.

Please have a look, any help I will be grateful for! Thanks.

<body>
    <style>
        #box {
            background: url('a.gif') no-repeat;
            width: 50px;
            height: 30px;
            position: absolute;
            top:210px;
            left: 0;
        }
        #grid {
            background: url('grid.gif') no-repeat;
            width: 423px;
            height: 240px;
            margin-left: 4px;
        }
        #stand {
            background: black;
            width: 4px;
            height: 240px;
            margin-left: 23px;
        }
        #hstand {
            /*horizontal stand for the carrier*/
            width: 423px;
            margin-left: 27px;
            height: 4px;
            background: black;
        }
    </style>
    <script>
        $(function() {

            $('#box').click(function(e) {

                var i = 0;

                while (i < 50) { //specifying the cycles for the box' movement

                    var hstandWidth = $("#hstand").width() + 27; //getting the current x-coordinates

                    //array to randomly select x-coordinates from 
                    var items = Array(hstandWidth - (50) * 1, hstandWidth - (50) * 2, hstandWidth - (50) * 3, hstandWidth - (50) * 4, hstandWidth - (50) * 5, hstandWidth - (50) * 6, hstandWidth - (50) * 7, hstandWidth - (50) * 8);
                    //variable with the x-coordinates, which are randomly fetched from the array
                    var moveLeft = items[Math.floor(Math.random() * items.length)];

                    //array to randomly select y-coordinates from 
                    var items2 = Array(30, 30 * 2, 30 * 3, 30 * 4, 30 * 5, 30 * 6, 30 * 7);
                    //variable with the y-coordinates, which are randomly fetched from the array
                    var moveTop = items2[Math.floor(Math.random() * items2.length)];

                    // y-achs movement
                    $(this).animate({
                        "top": "" + moveTop + "px"
                    }, 80);
                    // x-achs movement with the callback function which should add the colored div to every position the box has been

                    // create closure to capture moveTop and moveLeft values for later callback
                    // use different named variables xmoveTop and xmoveLeft to distinguish the
                    // closure variable from the outer for loop variable

                    (function(obj, xmoveTop, xmoveLeft) {
                        $(obj).animate({
                            "left": "" + xmoveLeft + "px"
                        }, 80, function() {

                            if ($("#" + xmoveLeft + xmoveTop + "").length > 0) {

                                $("#" + xmoveLeft + xmoveTop + "").css("background", "red");

                            } else {

                                $("<div style='position: absolute; top: " + xmoveTop + "px; left: " + xmoveLeft + "px; background: blue; width: 50px; height: 30px;' id='" + xmoveTop + xmoveLeft + "'></div>").appendTo("body");

                                console.log($("#" + xmoveLeft + xmoveTop + "").length);
                            }

                        });
                    })(this, moveTop, moveLeft);

                    //get the box to the initial position
                    $(this).animate({
                        "left": "0px"
                    }, 80);
                    $(this).animate({
                        "top": "210px"
                    }, 80);
                    //mark cycle passed
                    i++;
                }
            });
        });
    </script>
    </head>

    <body>
        <div id="box"></div>
        <div id="stand">
            <div id="grid"></div>
        </div>
        <div id="hstand"></div>
    </body>

Upvotes: 0

Views: 124

Answers (2)

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

You search for 

"#"+xmoveLeft + xmoveTop +""

but you create the id with

" id='"+ xmoveTop + xmoveLeft +"'"

Since they are created as strings you do not use the sum but concatenated strings..

Wrap them in parenthesis, so you get the actual sum ..

"#"+ (xmoveLeft + xmoveTop) +"" and id='"+ (xmoveTop + xmoveLeft) +"'

Upvotes: 1

OlivierH
OlivierH

Reputation: 3890

You create your div with id="xmoveTop + xmoveLeft" but you search for it with id="xmoveLeft + xmoveTop".

So change this line :

if ($("#" + xmoveLeft + xmoveTop + "").length > 0) {
    $("#" + xmoveLeft + xmoveTop + "").css("background", "red");

To : 

if ($("#" + xmoveTop + xmoveLeft + "").length > 0) {
    $("#" + xmoveTop + xmoveLeft + "").css("background", "red");

Upvotes: 1

Related Questions