javascript - Infinite loop when looping through 3 elements. Whats wrong? -
im trying create "plugin" facebook button. loop renders first div. , not other divs. why?
<style>body{background: #ccc;}</style> <div name="q" data-id="3" data-width="200"></div> <div name="q" data-id="1" data-width="300"></div> <div name="q" data-id="1" data-width="400"></div> <script> var s = document.getelementsbyname("q"); (var = 0; < s.length; i++) { e = s[i]; w = e.attributes['data-width'].value; = e.attributes['data-id'].value; var o={}; o.iframe = document.createelement('iframe'); o.iframe.setattribute('src', 'http://resources2.news.com.au/images/2012/09/27/1226482/758034-tardar-sauce-the-cat.jpg'); o.iframe.width = w; o.iframe.height = w + 100; o.iframe.border = 0; o.iframe.setattribute('style', 'border: 0;overflow: visible;'); e.appendchild(o.iframe); console.log('id:'+i+' width:'+w); } </script>
you using variable i both loop counter, , inside loop.
in first iteration assign value "3" variable i. converted number 3 when compared in for statement, , more length of array, loop ends after first iteration.
use different variable name variable holds data-id in loop.
edit:
the problem size of iframes here:
o.iframe.height = w + 100; the variable w contains string, example "200", , when of operands of + operator string, string concatenation. result not 300 "200100". iframes several thousand pixels high.
you need use numbers in calculation:
o.iframe.height = parseint(w) + 100;
Comments
Post a Comment