We Keep Coding

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">

jQuery how to insert <br/> tag after every Semicolon

I am dumping some CSS into a div and I am looking to format it so it is more legible. Basically what I want to do is insert a break tag after every semicolon. I have searched around for a while but can't seem to find something that quite fits what I am trying to do.
I have something like this...
HTML
<div class='test'>
color:red;background-color:black;
</div>​
jQuery
var test = $('.test').text();
var result = test.match(/;/g);
alert(result);​
And I have tried..
var test = $('.test').text();
var result = test.match(/;/g);
result.each(function(){
$('<br/>').insertAfter(';');
});
alert(result);​
Also I have started a fiddle here.. Which basically just returns the matched character...
http://jsfiddle.net/krishollenbeck/zW3mj/9/
That is the only part I have been able to get to work so far.
I feel like I am sort of heading down the right path with this but I know it isn't right because it errors out. I am thinking there is a way to insert a break tag after each matched element, but I am not really sure how to get there. Any help is much appreciated. Thanks...

try it like this
var test = $('.test').text();
var result = test.replace(/\;/g,';<br/>');
$('.test').html(result);​
http://jsfiddle.net/Sg5BB/

You can use a normal javascript .replace() method this way:
​$(document)​.ready(function(){
$(".test").html($(".test").html().replace(/;/g, ";<br />"));
});​
Fiddle: http://jsfiddle.net/SPBTp/4/

Use This CODE
var test = $('.test').text();
var result = test.split(';').join(';<br />')
http://jsfiddle.net/FmBpF/

You can't use jQuery selectors on text, it only works on elements.
Get the text, just replace each ; with ;<br/>, and put it back.
$('.test').html($('.test').text().replace(/;/g, ';<br/>'));

Try something like this :
var test = $('.test').text();
var result = test.replace(/;/g,";");
$('.test').html(result);
​
That should work if you stick it into your jfiddle.

Jquery append element and then alter css?

I'm attempting to create a div tag and then alter it via css, but for some reason its not working here's my code:
$('#draw').click(function(e){
var divToAdd = "<div id='box' style='display:block;background-color:red;width:100px;height:100px'></div>";
$("#area").append(divToAdd);
});
$('#left').click(function(e){
//var leftNow = document.getElementById("box").left + 1;
alert(document.getElementById("box").left);
$("#box").css('left',leftNow);
});
$('#right').click(function(e){
var leftNow = document.getElementById("box").left - 1;
$("#box").css("left","90");
});
So for some reason the value of document.getElementById("box").left is undefined. I've been trying to figure this out for a while, i've probably got something wrong in my syntax perhaps? Any help would be appreciated, thanks alot! Thank you Nick Craver.

You would need .style.left, or $("#box").css('left'); in this case.
But...there's an easier way, like this:
$("#box").css("left","-=1");
You can just make it relative this way, same for +=, keep it simple :)

Here I have two suggestions:
(1)Use jQuery object instead of object itself
var divToAdd = $("<div id='box' style='display:block;background-color:red;width:100px;height:100px'></div>");
Actually the expression above is not so good either, to make it more 'jQuery":
var divToAdd = $('<div></div>').css('background-color','red').css....
(2) Keep using jQuery if you involved it
$('#box').css('left') instead of document.getElemengById(...)

How to use setAttribute in javascript

Is this the correct format?
var title = new_element.setAttribute('jcarouselindex', "'items+1'");
alert(title);

No need to put the second parameter in quotes.
var title = new_element.setAttribute('jcarouselindex', items+1);
If you want to set a custom attribute then you can use HTML5 data-attributes, something like
var title = new_element.setAttribute('data-jcarouselindex', items+1);

It is syntactically correct JS/DOM, but there is no 'jcarouselindex' attribute in HTML and using setAttribute (as opposed to setting properties that map to attributes) is generally bad practice as it is buggy in MSIE (although not in such a way that will cause a problem in this case).
You might not be intending to have <foo jcarouselindex="'items+1'"> as your end result though.

Using jQuery?
var title = $('#new_element').attr('jcarouselindex', "'items+1'");
alert(title);

You have too many quotes:
var index = items + 1;
new_element.setAttribute('jcarouselindex', index);
Remark: there's no jcarouselindex attribute defined in HTML elements so this is not very clean code.

Why can't I set value to display in a div?

So I'm new to JavaScript and I'm trying to figure out why doesn't this work:
My function has this line:
document.getElementById("displayResult").value = ("test");
and this is my div:
<div id="displayResult"></div>

div's don't have a value property. You want to set the .innerText property.
And by all means, have fun testing things yourself, but you'll find it a lot easier if you use a framework to do these things (like jQuery)

You will want to use - .innerHTML no?
document.getElementById("displayResult").innerHTML = "<b>test</b>";

.value is only a valid attribute on form fields. You likely want to use the following code:
document.getElementById("displayResult").innerHTML = "test";

you have to test if innerHTML is supported by your brwser. As it is not the DOM Standard.
You can write it like
var oDiv = document.getElementById("displayResult")
if(typeof oDiv.innerHTML != undefined) {
oDiv .innerHTML = message;
} else {
oDiv .appendChild(document.createTextNode(message));
}