change font in jquery Not working

Question

I have the following code i am trying to change the font of a peice of text but it keeps coming up with a page error.

 function edit_font(div_id) {   
 $("#testsave").html(<strong onclick=\"javascript:save_font_stuff("+div_id+",font,'Arial')\">Done!</strong>
 } 

function save_font_stuff(div_id,font_setting,settings_vaule) {  
      if(font_setting=="font"){ 
          $("#"+div_id).css('font',settings_vaule);
      }else if(font_setting=="size"){
          $("#"+div_id).css('fontSize', settings_vaule);
      }else if(font_setting=="colour"){
          $("#"+div_id).css('color',settings_vaule);
}
 } 

Answer 1

Your onclick event handler is not passing a string as its second argument. Try surrounding the font argument to a string.

function edit_font(div_id) {   
 $("#testsave").html('<strong onclick="javascript:save_font_stuff(\"'+div_id+'\",\'font\',\'Arial\')">Done!</strong>');
 } 

Answer 2

The syntax highlighting it pointing it out in this case, you have to pass a string to .html() (or at least in this case), so it needs quotes like this:

function edit_font(div_id) {   
  $("#testsave").html("<strong onclick=\"javascript:save_font_stuff("+div_id+",'font','Arial')\">Done!</strong>");
}

The missing quotes around the string in general and around the font variable in the call will both throw an error here. Have you considered using a non-inline event handler? For example:

function edit_font(div_id) {   
  $("#testsave").empty().append(
    $("<strong>Done!</strong>").click(function() { 
      save_font_stuff(div_id,'font','Arial');
    })
  );
}

You could also simplify the other function, if not just collapsing it, like this:

var setting_map = { font: 'font', size: 'fontSize', colour: 'color' };
function save_font_stuff(div_id, setting, vaule) { 
  $("#"+div_id).css(setting_map[setting], vaule);
}