javascript - How to give each div created from setInterval an id starting from 1 -
i know question might have been answered few times, cannot seem work in code. willing thank you.
i have object creates rectangle on screen run setinerval recreate rectangle on screen in order many rectangles shown 1 after other on screen.
the problem: need give each rectangle id, don't know jquery , if implement attr on .block jquery changes id's of divs.
i want each new div created have own id example id=block1 next div id=block2 , on , of them of class block.
var cheight = window.innerheight - 150; //size of block var cwidth = window.innerwidth - 150; var block = function(block) { this.block = document.createelement('div'); this.block.classname = 'block'; document.body.appendchild(this.block); } block.prototype.coordinates = function(top,left) { this.block.style.top = top + 'px'; this.block.style.left = left + 'px'; } block.prototype.size = function(width,height) { this.block.style.width = width + 'px'; this.block.style.height = height + 'px'; } function randomtop() { var = math.random(); var y = (i * (cheight - 0 + 1)) +0; var x = math.floor(y); return x; } function randomleft() { var = math.random(); var y = (i * (cwidth - 0 + 1)) + 0; var x = math.floor(y) return x; } function repeatblocks() { block1 = new block(); block1.size(150,150); block1.coordinates(randomtop(),randomleft()); } setinterval(repeatblocks,1000);
see fiddle https://jsfiddle.net/gustav1105/sb1vls38/
you need add var id = 1;
then in block function add this: this.block.id = "block"+id++;
var cheight = window.innerheight - 150; //size of block var cwidth = window.innerwidth - 150; var id = 1; var block = function(block) { this.block = document.createelement('div'); this.block.classname = 'block'; this.block.id = "block"+id++; document.body.appendchild(this.block); } block.prototype.coordinates = function(top,left) { this.block.style.top = top + 'px'; this.block.style.left = left + 'px'; } block.prototype.size = function(width,height) { this.block.style.width = width + 'px'; this.block.style.height = height + 'px'; } function randomtop() { var = math.random(); var y = (i * (cheight - 0 + 1)) +0; var x = math.floor(y); return x; } function randomleft() { var = math.random(); var y = (i * (cwidth - 0 + 1)) + 0; var x = math.floor(y) return x; } function repeatblocks() { block1 = new block(); block1.size(150,150); block1.coordinates(randomtop(),randomleft()); } setinterval(repeatblocks,1000);
.block { position: absolute; border: 1px solid black; }
Comments
Post a Comment