Unable to change font using jquery - issue persisting

Question

Unable to change font using jquery - issue persisting

I am struggling to modify the font of a specific text in the following code, as it keeps displaying a page error.

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

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

jquery css

Answer 1

Answer №1

When it comes to syntax highlighting, it is crucial to remember to include quotes when passing a string to .html(). In the following example code snippet:

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

If you miss adding quotes around the string in general and specifically around the font variable in the function call, it will result in an error. Perhaps considering using a non-inline event handler would be beneficial. For instance:

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

You can also streamline the other function or even collapse it, like shown below:

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

Answer 2

When it comes to syntax highlighting, it is crucial to remember to include quotes when passing a string to .html(). In the following example code snippet:

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

If you miss adding quotes around the string in general and specifically around the font variable in the function call, it will result in an error. Perhaps considering using a non-inline event handler would be beneficial. For instance:

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

You can also streamline the other function or even collapse it, like shown below:

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

Answer 3

Answer №2

The onclick event handler in your code is failing because it does not pass a string as the second argument. To fix this issue, make sure to wrap the font argument in single quotes to convert it into a string.

function update_font_value(container_id) {   
 $("#update").html('<strong onclick="javascript:save_updated_font(\"'+container_id+'\",\'font\',\'Arial\')">Complete!</strong>');
 }

Answer 4

The onclick event handler in your code is failing because it does not pass a string as the second argument. To fix this issue, make sure to wrap the font argument in single quotes to convert it into a string.

function update_font_value(container_id) {   
 $("#update").html('<strong onclick="javascript:save_updated_font(\"'+container_id+'\",\'font\',\'Arial\')">Complete!</strong>');
 }

Unable to change font using jquery - issue persisting

Answer №1

Answer №2

Similar questions

Implementing AJAX to Access a PHP File Across Multiple Web Pages

Why isn't the value sending in the AJAX post request?

The dropdown feature of the Angular-UI typeahead directive is not functioning

Retrieving PHP form values using JQuery

Is it possible to send POST data to a top-level iframe using Javascript or jQuery when redirecting?

Unusual characteristics found in a select list controlled by Angular

Preventing error messages from impacting the layout of the form in jQuery validate

What could be causing the video not to display in landscape mode on the iPad Pro?

Can you tell me the name or purpose of this particular pattern?

The Vuetify rating system seems to be having trouble displaying

When the draggable item is released near the drop zone, allow drag and drop to combine

Tips for transferring data from jQuery to a Spring Controller and receiving a List in return

How does conditional rending of function components in react affect the positioning of my css elements?

What is the best way to insert an image icon within an input field using bootstrap?

Attempting to modify the animation speed of a fadeOut queue in jQuery from "slow" to the digit "3000" is proving unsuccessful

Assigning a class to an li element once the page has finished loading

Is there a way to gradually reveal an element as I scroll to a specific position?

Create a span in the middle with an ellipsis that seamlessly integrates with an icon on the left

What is the best way to bring focus to a button within a modal once the modal has been opened

Are there alternative methods to improve the responsiveness of a column layout?