We Keep Coding

How can I set attribute which ends with dollar sign using Javascript?

I'm trying to create a pre-processor that converts some custom markup in a file into attribute names which works with Polymer's data binding $= annotation, however I've come across a stumbling block.
I cannot set attributes using Javascript that contain a dollar sign.
I'm trying to convert
<p stuff="align bottom#md top#lg; offset 2gu#md; "></p>
to
<p align-bottom$="{{globals.abovemd}}" align-top$="{{globals.abovelg}}" offset-2gu$="{{globals.abovemd}}">
I have tried:
.setAttribute("align-bottom$", "{{globals.abovemd}}");
But it won't work because the attribute name cannot contain a dollar sign.
Can any one think of a way I can get around this?

This might do the trick(setting invalid attribute names), although obviously not valid in all cases:
function setDollar(el,name,val){
var attrs = [];
var tagName = el.tagName;
for (var i = 0; i < el.attributes.length; i++) {
var attrib = el.attributes[i];
if (attrib.specified) attrs.push(attrib.name+'="'+attrib.value+'"')
}
el.outerHTML = '<'+tagName+ ' '+name+'$="'+val+'"'+attrs.join(' ')+'>'+ el.innerHTML+'</'+el.tagName+'>';
attrs.forEach((attr)=>el.setAttribute(attr.name, attr.value))
}
setDollar(document.querySelector('#wow'),'foo','bar')
<div id="wow"><p>something</p></div>
Still, needs checking for closing tag etc.

Just exclude the $ anytime you are dealing with that property. The $ is just reflecting the property to the attribute onto that DOM element.
.setAttribute("align-bottom", globals.abovemd);

Pretty sure this gonna work
(you need put align-bottom$="" into your html first, this is just to update the value):
.attributes['align-bottom$'].value = "{{globals.abovemd}}";

Values of all textboxes on a page - without knowing the ID?

I am developing a Chrome Extension that, when the user leaves the page, saves all the text from the textboxes on that page and outputs it to a file.
If I knew the IDs of the textboxes on the page, then it wouldn't be a problem, but the issue is that I need the extension to get the values of all of the textboxes on the page without knowing the IDs, as it will be a different website each time the extension is used.
Also, how would the information be collected? In a string? It would be nice to go down the page and add each textbox to a file, one by one, instead of one huge string.
I've never used jQuery or understood it, and there's probably a solution in it staring me in the face. If anyone suggests using it, please could you explain it a little bit?
Thanks in advance. I would post my code, but I don't know where to start - ergo I don't have any.

you could store it in array using $.each, as :
var valsArr = [];
$("input[type=text]").each(function() {
valsArr.push( $(this).val() );
});
or create object with name as key and value as its value, like:
var valsObj = {};
$("input[type=text]").each(function() {
valsObj[this.name] = $(this).val();
});

You can do it like this:
function onClick(){
var areas = document.getElementsByTagName("textarea");
for(var i = 0; i < areas.length; i++){
alert(areas[i].value);
}
}
<textarea></textarea>
<textarea></textarea>
<button onclick="onClick()">Gather information</button>
Also see this regarding your "save to a file" question Using HTML5/Javascript to generate and save a file

Use the selector and apply it in an each cycle.
$(":text").each(function(){
alert($(this).val());
});

Make a for loop
for(i=0; i < $("input[type='text']").length; i++){
$("input[type='text']").index(i).value();
}

You can use .map() : It returns an array.
var arr = $(":text").map(function() {
return this.value
}).get(); //add join(',') after get() to get a simple comma separated list.
Instead of input[type="text"] you could also use :text pseudo selector.
Demo

Text Value From HTML Into Javascript Var?

I would like to know if the following line is the correct way to take html and put it into a Javascript var as numeric value?
var thePoolHeatingFeeRounded = Number(document.getElementsById("priceDisplayPoolHeating").innerHTML);
Nevermind that the variable name has the word 'rounded' in it. The value that I am trying to put into this var is a 2 point float that has already been rounded and it exist as html.
Below is the line of HTML code that is referenced by getElementsById...
$<div id="priceDisplayPoolHeating" class="priceDisplay">8.00</div>
Any input is greatly appreciated.

Try this instead:
var thePoolHeatingFeeRounded = Number(document.getElementById("priceDisplayPoolHeating").innerHTML);
You were calling getElementsById which is not correct (it is not plural), I changed it to getElementById
Tip: if you need to check whether the Number is valid you can use !isNaN(thePoolHeatingFeeRounded) or use a trick to turn it into a default number (such as 0 or -1) like this:
var thePoolHeatingFeeRounded = Number(document.getElementById("priceDisplayPoolHeating").innerHTML) || 0;
You can also use parseFloat():
var thePoolHeatingFeeRounded = parseFloat(document.getElementById("priceDisplayPoolHeating").innerHTML) || 0;

You are very close. Supposed to be getElementById, not Elements. I created a little code to show you how it works.
Here's what the code looks like in this website's code displayer:
function displayText(){
var thePoolHeatingFeeRounded = Number(document.getElementById("priceDisplayPoolHeating").innerHTML)
alert(thePoolHeatingFeeRounded);
}
<div id="priceDisplayPoolHeating">8.01</div><input type="button" onclick="displayText()" value="Display the innerHTML of Pool Heating">

How to get and add the values of two elements by ID

<script type="text/javascript">
$(document).ready(function() {
var sub_total = $("sub_total").text();
alert(sub_total);
var ship_total = $("ship_total").val()
alert(ship_total);
var new_total = sub_total + ship_total;
$('#new_total').html( new_total.toFixed(2));
});
</script>
I'm using alert to test the output and It is not getting the value inside the span ID.
$<span id="sub_total"><?php echo $sub_total = number_format($this->cart->total(), 2); ?></span></td>
This does display correctly on the page but the alert is a blank box. Causing the new_total value to stat NaN not a number.
How do I add the values in these two fields?

EDIT:
You forgot to get the value - you are only getting the element
Since you're already using jQuery you can get the value like
var sub_total = parseInt($("#sub_total").text());// this is where you need to use .text()
var ship_total = parseInt($("#ship_total").text());
or if you want to keep plain js..
document.getElementById("sub_total").value
Since you have $ in your text you need to get rid of it before parsing it. You can use regex as #Bubbles stated or whatever method you want to remove the $ sign.. ex. substring.. split..
$.trim($("#sub_total").text().split('$')[1])
or
$.trim($("#sub_total").text()).substring(1)

wirey gives a good review of part of the problem, but as is I don't believe it's enough. "parseInt" won't work on "$20", you have to remove the dollar sign first. If you're feeling lazy, this is nothing a good regex won't be able to solve in short order:
var sub_total = parseInt($("#sub_total").text().match(/[0-9]+/)));
var ship_total = parseInt($("#ship_total").text().match(/[0-9]+/)));
This will just grab the number from the span, then parse it.

remove <script> tags that contain webresource.axd as the src from a string. Using Regex replace javascript?

I have a string variable in javascript that contains HTML code in it.
I need to parse it and remove any <SCRIPT> Tags that contain webresource.axd as their source.
An example would be,
<script type="text/javascript" src="/myfolder/webresource.axd?d=pfnsem3_something"></script>
I will need to replace that with " " basically empty space.
Can you please suggest how you would do that using RegEx?
Thanks I'm a newbiew to Javascript and Regex.
Daniel

// get all scripts
var s = document.getElementsByTagName('script');
// loop threw all scripts
for(var i=0; i<s.length; i++) {
// get source
var src = s[i].src;
// see if it contains query
var result = src.search(/webresource\.axd/);
// if the result is not false
if(result != -1) {
// remove the script
document.removeChild(s[i]);
}
}
You can replace the remove script if you wanted to make it blank