Add font + function to text box

Question

I am trying to create a function for the Script encoder that I create, which will increase the textarea font size 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 Textarea is not displayed.

Answer 1

I decided to change your decision here:

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

The only "gotcha" is that if the text in the text field increases when the text size increases, it does not stay in the correct order until you start typing again. You will see what I mean, but hopefully this solved your main problem.

Edit : a little indentation makes the problem much less noticeable http://jsfiddle.net/H2J9Y/3/

Answer 2

Try this instead

 <div id="panel"></div> <br> <input type="button" value="Font+" name="fontAdd" id="fontAdd"> 

I added id="fontAdd" and then link to click()

 $('#fontAdd').click(function(){ 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>"); }); 

In addition, you are missing a few ;

Example: http://jsfiddle.net/jasongennaro/n3jGK/

** Press the font + button to see the increase.