Breakpoint skips create element

**dday9** · Aug 18th, 2015, 08:46 PM

I'm wanting to create a grid of images in a DIV element; so I figure I'd use a nested loop and create the images, set some properties, and add them to the DIV element. However, when I debug my code using FireBug, it goes through the loop but skips over my createElement line as well as when I try to set any properties. Here is the code that I'm using:

Code:

var grid = document.getElementById("Grid");
var h = grid.clientHeight;
var w = grid.clientWidth;
var pb;

for (x = 0; x < h; x = x + h / 50) {
	for (y = 0; y < w; y = y + w / 50) {
		pb = document.createElement("img");
		pb.style.border = "1px solid black";
		pb.style.height = "50px";
		pb.style.width = "50px";

		grid.appendChild(pb);
	}
}

It skips the first 4 lines in my For loop. Any reasons why?

**tr333** · Aug 19th, 2015, 09:17 PM

Have you checked the for loop conditions? Is clientHeight returning a value > 0? Maybe try with getBoundingClientRect. Div elements will have zero height by default, unless you specify it explicitly.

Don't forget to initialise all variables, including "x" and "y". Strict mode might also help you out too, as will JSHint and JSLint.

JavaScript Code:

"use strict";
 
var grid = document.getElementById("Grid");
var h = grid.clientHeight;
var w = grid.clientWidth;
var pb;
 
for (var x = 0; x < h; x = x + h / 50) {
    for (var y = 0; y < w; y = y + w / 50) {
        pb = document.createElement("img");
        pb.style.border = "1px solid black";
        pb.style.height = "50px";
        pb.style.width = "50px";
 
        grid.appendChild(pb);
    }
}

**coothead** · Aug 20th, 2015, 07:20 AM

Hi there dday9,

This may be a possible solution...

Code:


<!DOCTYPE html>
<html  lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>untitled document</title>

<link rel="stylesheet" href="/" media="screen">

<style media="screen">
body {
    background-color:#f0f0f0;
 }
#grid{
    height:200px;
    padding-top:10px;
    padding-bottom:10px;
    margin:0;
    border:1px solid #999;
    background-color:#fff;
}
.thumb {
   float:left;
   width:46px;
   height:46px;
   margin:1px;
   border:1px solid #000;
   border-radius:4px;
   background-color:#fcfcfc;
 }
</style>

</head>
<body>

<div id="grid"></div>

<script>
(function() {
   'use strict';
    var gr=document.getElementById('grid'),
        h,w,rh,rw,mw,pb,x,y;

function createThumbs(){

    h=grid.clientHeight,
    w=grid.clientWidth,

    rh=Math.floor(h/50),

    rw=Math.floor(w/50),
    mw=(w%50)/2+'px';

for(x=0;x<rh;x++) {
for(y=0;y<rw; y++) {
   pb=document.createElement('img');
   pb.src='http://coothead.co.uk/images/anim'+w%6+'still.gif';/* just for amusement */
   pb.className='thumb';
   gr.appendChild(pb);
  }
 }

   gr.style.paddingLeft=mw;

 }

   createThumbs();

onresize=function(){
while(gr.firstChild) {
      gr.removeChild(gr.firstChild);
 } 
  createThumbs();
 }

})();
</script>
</body>
</html>

Thread: Breakpoint skips create element

Thread Tools

Display

Breakpoint skips create element

Re: Breakpoint skips create element

Re: Breakpoint skips create element

Posting Permissions