We Keep Coding

Setting Up Custom Font Size Using Textarea, Button and javascript

I am trying to set up some code, where the user can enter a number into a <textartea> and click a button, which will set the font size of another <textarea> by editing the Styleattribute. I tried the following:
<h2>Set Font</h2>
<textarea id='input'></textarea>
<button onclick ="myFunction()">Click</button>
<textarea id='MainText' style="font-size:18px;"></textarea>
<script>
function myFunction(){
var InputValue = document.getElementById('input').value;
document.getElementById('MainText').style.font-size = 'InputValue';
alert('Font Size Changed to ${InputValue}')
}
I am not sure what to do.

some syntax errors here. You are using JS to do this so you need to camelCase fontSize. Also, you are assigning it to a String when you should be assigning it to the variable name so get rid of those quotes. Also, you are interpolating the variable incorrectly in your alert:
alert('Font Size Changed to ${InputValue}') You need to use backticks for this, not single quotes
var InputValue = document.getElementById('input').value;
document.getElementById('MainText').style.font-size = 'InputValue';
should be:
var inputValue = document.getElementById('input').value;
document.getElementById('MainText').style.fontSize = inputValue + 'px';

you should use fontSize instead of font-size and inputValue as variable not string
e.g
document.getElementById('MainText').style.fontSize = inputValue + 'px';

What is the correct syntax for my javascript snippet to set font size and style?

In the SBM application, I have a form action whose javascript snippet works. It replaces commas with new lines:
var commaDelimValue = GetFieldValue("DEPARTMENTS_FUNCTIONS");
var convertedToList = commaDelimValue.replace(/,/g, '\n');
SetFieldValue("DEPTS_FUNCTIONS_TEXT", convertedToList, "true");
I want to use a similar snippet to set font size and style, but the font size and style commands are failing:
var projDescrValue = GetFieldValue("PROJECT_DESCRIPTION");
var fontFamilyValue = projDescrValue.style.fontFamily("Helvetica");
var fontSizeValue = fontFamilyValue.style.fontSize("9pt");
SetFieldValue("PROJECT_DESCRIPTION_COPY", fontSizeValue, "true");

The syntax to set the font style is:
object.style.fontFamily = "helvetica";
object.style.fontSize = "9pt";
Or
object.style.font = "italic bold 9pt helvetica";
More information

setAttribute not working

I am making a plugin for form validation as practice, but for some reason after I create a h2 element and try to set it's attribute, it is not working. Here is the code
var testing = function(regex, value, error_msg, error_msg_field_id){
var pattern = new RegExp(regex);
if (!pattern.test(value)){
var ele = document.createElement("H2");
var node = document.createTextNode(error_msg);
ele.setAttribute('style', 'color:white');
alert("hi");
jQuery(error_msg_field_id).append(node);
}
}
the text appears with no problem, but it is not in white color. This make no sense at all to me

You are using setAttribute correctly, but you are setting the property on your h2-element, which is never actually inserted in your DOM.
You can change and simplify the relevant section of your code to:
var ele = document.createElement("H2");
ele.textContent = error_msg;
ele.setAttribute('style', 'color:white');
jQuery(error_msg_field_id).append(ele);
The usage of jQuery here is also not necessary. You can simply use
document.querySelector("#" + error_msg_field_id).appendChild(ele);
which is equally simple.

How to get margin value of a div in plain JavaScript?

I can get height in jQuery with
$(item).outerHeight(true);
but how do I with JS?
I can get the height of the li with
document.getElementById(item).offsetHeight
but i will always get "" when I try margin-top:
document.getElementById(item).style.marginTop

The properties on the style object are only the styles applied directly to the element (e.g., via a style attribute or in code). So .style.marginTop will only have something in it if you have something specifically assigned to that element (not assigned via a style sheet, etc.).
To get the current calculated style of the object, you use either the currentStyle property (Microsoft) or the getComputedStyle function (pretty much everyone else).
Example:
var p = document.getElementById("target");
var style = p.currentStyle || window.getComputedStyle(p);
display("Current marginTop: " + style.marginTop);
Fair warning: What you get back may not be in pixels. For instance, if I run the above on a p element in IE9, I get back "1em".
Live Copy | Source

Also, you can create your own outerHeight for HTML elements. I don't know if it works in IE, but it works in Chrome. Perhaps, you can enhance the code below using currentStyle, suggested in the answer above.
Object.defineProperty(Element.prototype, 'outerHeight', {
'get': function(){
var height = this.clientHeight;
var computedStyle = window.getComputedStyle(this);
height += parseInt(computedStyle.marginTop, 10);
height += parseInt(computedStyle.marginBottom, 10);
height += parseInt(computedStyle.borderTopWidth, 10);
height += parseInt(computedStyle.borderBottomWidth, 10);
return height;
}
});
This piece of code allow you to do something like this:
document.getElementById('foo').outerHeight
According to caniuse.com, getComputedStyle is supported by main browsers (IE, Chrome, Firefox).

I found something very useful on this site when I was searching for an answer on this question. You can check it out at http://www.codingforums.com/javascript-programming/230503-how-get-margin-left-value.html. The part that helped me was the following:
/***
* get live runtime value of an element's css style
* http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element
* note: "styleName" is in CSS form (i.e. 'font-size', not 'fontSize').
***/
var getStyle = function(e, styleName) {
var styleValue = "";
if (document.defaultView && document.defaultView.getComputedStyle) {
styleValue = document.defaultView.getComputedStyle(e, "").getPropertyValue(styleName);
} else if (e.currentStyle) {
styleName = styleName.replace(/\-(\w)/g, function(strMatch, p1) {
return p1.toUpperCase();
});
styleValue = e.currentStyle[styleName];
}
return styleValue;
}
////////////////////////////////////
var e = document.getElementById('yourElement');
var marLeft = getStyle(e, 'margin-left');
console.log(marLeft); // 10px
#yourElement {
margin-left: 10px;
}
<div id="yourElement"></div>

Here is my solution:
Step 1: Select the element
Step 2: Use getComputedStyle and provide the element to it
Step 3: Now access all the properties
const item = document.getElementbyId('your-element-id');
const style= getComputedStyle(item);
const itemTopmargin = style.marginTop;
console.log(itemTopmargin)
It will give you margin with px units like "16px" which you might not want.
You can extract the value using parseInt()
const marginTopNumber = parseInt(itemTopmargin)
console.log(marginTopNumber)
It will give you the numerical value only (without any units).

How to add <font> with Javascript?

FM_log(3,"rp_insertTable() called");
var farmTable = dom.cn("table");
var ftableBody = dom.cn("tbody");
var i;
var maximize = GM_getValue("Maximize_" + suffixGlobal, 0);
farmTable.className = "FMtbg";
farmTable.id = "farmMachineTable";
farmTable.setAttribute('cellpadding', 2);
farmTable.setAttribute('cellspacing', 1);
farmTable.style.marginBotton = "12px";
how can I add to that table, I mean, edit the HTML in the middle of that table and add "< font >" ??? (ps: how can I add < > code here without it being interpreted as code?)

To set the font name via javascript, set the .style.fontFamily attribute. For the size it's .style.fontSize
PS: Never ever use <font> - it's deprecated and a bad practice.