Outputting html tags as text in jQuery -
i have code:
image height: <input type="text" id="imgheight" /><br /><br /> image width: <input type="text" id="imgwidth" /><br /><br /> number of images: <input type="text" id="imgno" /><br /><br /> <input type="button" value="show code" id="result" /><br /><br /> <textarea rows="20" cols="60" id="output"></textarea> <script> $(document).ready(function(){ $("#result").click(function(){ var imgheight = $("#imgheight").val(); var imgwidth = $("#imgwidth").val(); var imgno = $("#imgno").val(); for(i=0; i<imgno; i++){ $("#output").text("<img src='' width='"+imgheight+"' height='"+imgwidth+"' />"); } }); }); </script>
what i'd able output html code plain text textarea (i'd people able copy generated code). i'd img tag shown in text area many times have specified in "number of images" box. code above outputs code text once regardless of "number of images" type in. can me that? thx in advance
[edit] thank fast responses i'm stuck different. want users able put own links , want links appear in textarea within each image tag created. however, cannot think way "grab" content of each input , put in tag. shows content of first input help, please? :) here's code:
image height: <input type="text" id="imgheight" /><br /><br /> image width: <input type="text" id="imgwidth" /><br /><br /> number of images: <input type="text" id="imgno" /><br /><br /> <p id="additionalimgs"></p> <input type="button" value="show code" id="result" onclick="abba()" /><br /><br /> <textarea rows="20" cols="60" id="output"></textarea> <script> $(document).ready(function(){ $("#result").click(function(){ var imgheight = $("#imgheight").val(); var imgwidth = $("#imgwidth").val(); var imgno = $("#imgno").val(); var text = ''; var y = 1; for(i=0; i<imgno; i++){ var aaa = $("#additionalimgs input").val(); text += "<img src='"+aaa +"' width='"+imgheight+"' height='"+imgwidth+"' name='"+ y++ +"' />"; } $('#output').text(text); }); }); $(document).ready(function(){ $("#imgno").change(function(){ var imgno = $("#imgno").val(); x = 1; var y = 1; var text = "image number: "; for(i=0; i<imgno; i++){ $("#additionalimgs").append(text + y++ + ' link' + "<input type='text' name='"+ x++ +"'><br />")}; }); }); </script>
.text()
overwrites current text in element. use .append()
or append text variable , apply variable .text()
after loop:
var text = ''; for(i=0; i<imgno; i++){ text += "<img src='' width='"+imgheight+"' height='"+imgwidth+"' />"; } $('#output').text(text);
Comments
Post a Comment