Increasing font-size of list

Question

I have done the following.

In my html I have defined a list as

<ul id="fruits">
  <li>Apple</li>
  <li>Oranges</li>
  <li>Guava</li>
</ul>

<input type="submit" id="big" value="Bigger" />
<input type="submit" id="small" value="Smaller" />

In my JavaScript file I have written code to increase and decrease the font-size of list items but it is NOT working.

function change_size(element,sizeName){

var current_size=parseInt(element.css('font-size'));
if(sizeName == 'smaller')
 var new_size=0;
 {
   new_size=current_size-4;
 }
else
{
  new_size=current_size+4;
}

element.css('font-size',new_size+'px');

}

$('#big').click(function(){
  change_size($('#fruits'),'bigger');
})

$('#small').click(function(){
  change_size($('#fruits'),'smaller');
})

I even tried li tag inside change_size but it did not work.

Answer 1

Fiddle Demo

change_size($('#fruits'), 'bigger');
//           ^ add missing (

---

You can optimize your change_size function like this.

Fiddle Demo

function change_size(element, sizeName) {
    var current_size = parseInt(element.css('font-size')),
        new_size = (sizeName == 'smaller') ? current_size - 4 : current_size + 4;
    element.css('font-size', new_size + 'px');
}