javascript - Build element(s) if less than 9 exist -
i'm building portfolio of site. want show off 3x3 grid of work. i'm trying write javascript code render gray blocks placeholders total of squares (including shots) always 9.
the goal:
my code:
function inventblank() { // define variables var shot = document.getelementbyid('shot'), = document.getelementbyid('a'), div = document.createelement('div'); // insertafter function function insertafter(referencenode, newnode) { referencenode.parentnode.insertbefore(newnode, referencenode.nextsibling); } // if existing shots less 9... if (shot < 9) { // render gray boxes until 9 (var = 0; < 10; i++) { var div = document.createelement('div'); div.classname = "shot"; div.insertafter(a, div); // insert new element "div" after "a" } } } inventblank(); // call anonymous function
i try use this, console says it's anonymous function!
here jsfiddle
basically, it's supposed render gray blocks after span. accomplish generating div name of div.
i'm pretty sure loop invalid! :(
there fix , can starting point
http://jsfiddle.net/inferon/bzvq6/
<!doctype html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <head> <meta charset="utf-8" /> <title></title> <style> .wrapper { width: 960px; margin: 0 auto; } img, .shot { width: 292px; height: 219px; float: left; margin: 10px; background: #eee; } .clearfix{ clear:both; } </style> </head> <body> <div class="wrapper"> <section class="main" id="main"> </section> </div> <script> var shot = function (src) { this.src = src; }; var shots = []; shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1567549/weather-dribbble.jpg')); shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1588565/safari-yosemite-dribbble.jpg')); shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1573950/browsers.jpg')); shots.push(new shot('https://d13yacurqjgara.cloudfront.net/users/332776/screenshots/1546946/blackclock-dribbble.jpg')); shots.push(new shot('')); shots.push(new shot('')); shots.push(new shot('')); shots.push(new shot('')); shots.push(new shot('')); function addshot(target, source) { var div = document.createelement('div'); div.setattribute('class', 'shot'); var img = document.createelement('img'); img.setattribute('src', source.src); div.appendchild(img); target.appendchild(div); } function appendclear(target) { var div = document.createelement('div'); div.setattribute('class', 'clearfix'); target.appendchild(div); } var target = document.getelementbyid('main'); (var = 0; < shots.length ; i++) { if(i >0 && % 3 == 0){ appendclear(target); } addshot(target, shots[i]); } </script> </body> </html>
Comments
Post a Comment