Question

I’m trying to create a feature for the Script Encoder that I’m creating that will increase the font size of the textarea by one. This is what I got so far:

<script type="text/javascript"> 
  var size=10 + "px";
  var size2=10;
  function add(){
     size2++;
     size=size2+"px";
  }
  if(typeof size2=="undefined"){size2="10";}
  $('#panel').html("<form method='post' name='pad' align='center'><textarea class='look' rows='11' id='code1' style='font-size:"+size+";' name='text' cols='58'></textarea><br></form>")   
</script>

<div id="panel"></div>
<br />
<input type="button" value="Font+" name="fontAdd" onclick="add();">

The problem is that the Textarea is not showing.

Answer 1

I ammended your solution here:

http://jsfiddle.net/H2J9Y/2/

The only ‘gotcha’ is that if there is text in the textbox when the size of the text is increased, it doesn’t really stay inline properly until you start typing again. You’ll see what I mean, but hopefully that’s solved your main problem.

Edit: A bit of padding makes the issue a lot less noticable
http://jsfiddle.net/H2J9Y/3/