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