Is it possible to incorporate variables in a JavaScript function that includes HTML code? Let's consider the following example:
function SetCFonts()
{
var Color = $('#CColor').val();
var Font = $('#CFont').val();
var Size = $('#CSize').val();
var Bold = $('#CBoldOp').val();
var Text = $('#NMsg').val();
var Gen = "<font style=font-weight:+Bold color:+Color font-size:+Size font-family:+Font>Your Text Here</font>";
alert(Gen);
}
To combine the strings, you must concatenate them:
var CombinedString = "<font style=font-weight:" +Bold + " color:" +Color + " font-size:"+Size + " font-family:" +Font+ ">Your Text Here</font>";
To utilize the content, you can construct an element from it and then utilize jQuery's .css() function:
function CustomizeFonts ()
{
var Style = $('<font />').css({
'color' : $('#CColor').val(),
'font-family' : $('#CFont').val(),
'font-size' : $('#CSize').val(),
'font-weight' : $('#CBoldOp').val()
}).text( $('#NMsg').val() );
console.log( Style );
}
Follow John Koerner's advice and use the + operator for string concatenation. Alternatively, you can utilize the concat operator.
var Gen = "<font style=font-weight:".concat(Bold).concat("color:").concat(Color).concat("font-size:").concat(Size).concat("font-family:").concat(Font).concat(">").concat(Text).concat("</font>");
To learn more about different methods of concatenating strings in Javascript, check out: Multiple ways to concatenate a String in Javascript
The key aspect you may be overlooking is the need for proper concatenation in your code. Remember to close and reopen the inverted commas as needed:
function UpdateFonts()
{
var Color = $('#FontColor').val();
var FontType = $('#FontType').val();
var Size = $('#FontSize').val();
var IsBold = $('#BoldOption').val();
var TextContent = $('#MessageText').val();
var GeneratedCode = "<font style=font-weight:" + IsBold + "; color:" + Color + "; font-size: " + Size + "; font-family: "+ FontType +" >Your Message Here</font>";
alert(GeneratedCode);
}
I created a basic application that retrieves JSON data from the server using C# code. public JsonResult Read() { var products = db.Products; return Json(GetProducts(), JsonRequestBehavior.AllowGet); } public IEnumerable<Product> GetProducts ...
I am in search of ways to enhance the loading speed of a web application, particularly one that encompasses numerous javascript files on every HTML page. My plan is to experiment with head.js on a specific page to observe if it has a positive impact on loa ...
I'm looking for a way to remove the randomly picked item from my namepicker so that it doesn't appear twice. const Names = [ { name: 'Name1', id: 1 }, { name: 'Name2', id: 2 }, ] btnClick = () => { let ...
Is it advisable to create colored shapes in Illustrator, export them as SVG files, and then embed input tags or textareas within these shapes to allow users to enter text? Are there alternative methods we could use for this functionality? https://i.sstat ...
My HTML table features a column that displays a Yes/No option. When a user switches the option from Yes to No or vice versa, it triggers an AJAX call to a PHP script which updates the corresponding record in the database. Everything is functioning correctl ...
When it comes to escaping characters in JSP pages, I am wondering which is the better option - using escapeXml or escapeHtml? ...
I recently created a basic drop-down list like this: https://i.sstatic.net/4Tlxx.png Here is the HTML code for it: <select class="form-control" id='0' (change)="retrieveValue($event.target)"> <option id='0'>{{ g ...
I'm working on a scenario where I have to manage multiple checkboxes in a list Only one checkbox can be selected at a time For example, if I toggle on Checkbox 1 and then click on Checkbox 2 - I want to automatically toggle off Checkbox 1 as I toggl ...
Working on ASP.NET gridview conversions with datatables.net plug-in. The reason behind this is complex and subject to debate. But, I need assistance with a specific issue. The process of converting the gridview using Javascript was simple and effective. H ...
My directory structure is: /project Login |1.1 js |1.2 db Main Within the 'db' folder, there is a script that utilizes AJAX to determine if a user is an admin or regular user. The goal is to redirect to a page stored in the 'Main&apo ...
Using ga.js, I have encountered an issue with tracking internal links on my website. Despite successfully tracking external links and viewing real-time reports for events, the internal links are not being recorded accurately. While testing pages, the tot ...
Is it possible to create a webpage that is only visible on tablet and mobile devices, while redirecting desktop users somewhere else? I want this page to be hidden from desktop users entirely. ...
Apologies for the unconventional terminology in the query, but I am struggling to find better words to describe it. Hopefully, this example will clarify my intention: scss-syntax .my-smug-selector { @include my-smug-mixin(30px); } desired css-output ...
UPDATE I found and fixed a typo in the code, making adjustments to both the JSFiddle and this post to show the correction. The Headline is supposed to take up 100% height but currently isn't. Still seeking feedback on this issue. Everything looks per ...
I'm experiencing a CSS import issue in my React project. I have a "Home" page that imports Home.css and a "Hero" page that imports Hero.css. Strangely, the styles from Hero.css are being applied to every page in the application without me explicitly d ...
Can you modify a dictionary inside the ?: statement and then return the updated dictionary in the same block? For example, something like this: a > b ? <dict['c'] = 'I'm changed', return dict> : <some other code>; I ...
Struggling to assign the value of "result" in the inner function. Any suggestions on how to do this? I am able to console log the result variable inside the function, but a friend recommended using promises. However, I have no clue how to implement that ...
While utilizing a third-party embedded code that initiates HTTP requests with a request header origin different from my own, I encountered an issue. Despite attempting to intercept these HTTP requests using XMLHttpRequest, they do not get intercepted. This ...
I am interested in creating a mapping application similar to Google Maps that can asynchronously load images from the backend. I am seeking guidance on where to begin and how to proceed in this endeavor. The ultimate goal is to have the image displayed w ...
Recently, I began working with fp-ts and wanted to create a method with functional-like behavior that would: Parse a bearer token Verify the validity of the user using the parsed token import { Request } from 'express'; import { either } from & ...