passing javascript variable to html for display - javascript

I am using the following
var loan = parseFloat(document.getElementById("loanamount"));
document.getElementById('numpay').textContent = loan.toString();
and my html is this:
<p>Number of Payments: <a id="numpay"> </a> </p>
I feel like this should be working but cannot seem to get anything other than NaN in my html, no matter how I configure it. I know I am a novice at javascript but could you please give me a tip?
Thanks!

You need parseFloat(document.getElementById("loanamount").value) most probably
TIP: Instead of parseFloat, just use + to convert from strings to numbers. So +document.getElementById("loanamount").value should also serve your purpose.

var loan = parseFloat(document.getElementById("loanamount").value);
document.getElementById('numpay').textContent = loan.toString();

If you aren't doing anything with loan then just do this:
document.getElementById('numpay').textContent = document.getElementById("loanamount").value

If the element with id loanamount is an input you will need .getElementById("loanamount").value, if it is a span or div then .getElementById("loanamount").innerHTML. For writing back the same apply.
But in either case you must not use .toString() on the write in. parseFloat() will give you a number, which does not have methods. JavaScript is not that similar to Java.

var loan = parseFloat(document.getElementById("loanamount").value);
document.getElementById('numpay').innerHTML = loan.toFixed(2);

Related

converting a string to float doesn't work

I got a variable Javascrpit which has a number as a string in this case 0.84. I'm trying to convert it into a float but when I try to it appears a 0 as float instead the 0.84.
I'm using this:
var pot="0.84";
var asd = parseFloat(pot);
console.log(asd);
EDIT:
This is not exactly the example. I recover data from the HTML and it works for other numbers but not for this. It is difficult to explain my problem exactly. It is a lot of code and works for other numbers so don't know exactly.
Your input is not "0.84". If you test with that, you will get the correct answer. Your input has something else inside, like spaces, for example:
"0 .84"
This should be the solution:
parseFloat(pod.replace(/ /g, ""))
I have tried this example on my end and it completely worked. However, you can try to instead input the string value directly into the parse float() function and it should print our your expected value. If you still want to assign the parsefloat() to a variable, then try to either rewrite the code or re-open your IDE because the code should work.
var pot = "0.84"
console.log(parseFloat(pot))
or you can just write it in one line
console.log(parseFloat("0.84"))

Number does not appear in span

I have created a function that generates a number. I want to put the number into a span element. However, this will not work. The function works and if I put the number into a value box it works. These are the two parts of code pertaining to the question.
Code:
document.getElementById('average').innerhtml= averagescore
Average Score:<span id='average'> 0 </span>
The error might be with .innerhtml. You should write .innerHTML instead.
Note the 'HTML' is all caps.
Try this
document.getElementById('average').innerHTML = "your value"
Keep in mind the case-sensitivity of any programming language. JavaScript and jQuery are Case Sensitive Languages.
Two Variables like
var abc;
var ABC;
both are different. So same happens in your case innerHTML vs innerhtml, which are totally different.

AngularJS math joining strings instead of adding

I have a standard $scope.totals = $scope.totals = {storage:0, dailystorage:0}; and an angular.forEach that adds cam.storage to the $scope.totals.storage to give me the total storage.
I am using this to do that:
$scope.totals.storage = $scope.totals.storage+cam.storage;
The problem is that, say if two cam.storage are 21.09 and 15.82, it'll make $scope.totals.storage 21.0915.82 - basically adding them like strings instead of like math.
How do I make it an addition - not a joining?
Judging from what you've posted (verifying that $scope.totals is already a number), cam.storage is a string. You need to parse it to a number before adding it to the existing value:
$scope.totals.storage += parseFloat(cam.storage);
If they are concatenating instead of adding, it sounds like you need to parse them as decimals (You can also use toFixed(int) to limit the decimals as needed).
$scope.totals.storage = parseFloat($scope.totals.storage)+parseFloat(cam.storage);
My solution I use {{(a*1)+(b*1)}} It work.

innerHTML in Combination with parseFloat

What I'm attempting to do can be accomplished by the following...
elementContent = document.getElementById('docElement').innerHTML;
elementContent = parseFloat(elementContent);
or even by...
elementContent = parseFloat( document.getElementById('docElement').innerHTML );
but I can't help to wonder if there's a more elegant way to retrieve and assign DOM content as a float that I may be unaware of. Any insight?
There is the unary plus operator which tries to convert a string (or another type's toString()) to a number. It would be used like:
elementContent = +document.getElementById('docElement').innerHTML;
As others have mentioned you can use jQuery as essentially syntactic sugar for .innerHTML here, also.
That's a fine way to go about doing things. The only thing I could suggest would be that if you can avoid working with the HTML markup entirely, by storing the "clean" number as an attribute of the element, that would be preferable, as it would get around problems that might be introduced if the HTML gets fancier than you expect it to be. (For example, sometimes designers want negative numbers formatted with the Unicode "minus" glyph instead of the plain hyphen, because it looks better.)
Thus if you could generate your elements like this:
<span id='docElement' data-value='29.20221'>29.20221</span>
then instead of accessing the value as ".innerHTML" you'd use ".getAttribute()":
var value = document.getElementById('docElement').getAttribute('data-value');
value = parseFloat(value);
Use JQuery:
var html = parseFloat($('#docElement').html());
$('#docElement').html(html);
If you use a library such as jQuery the code for this would be more elegant, like so:
var el = parseFloat( $('#docElement').text() );
Don't forget you might run into an issue where you need to trim() the string as well.

Syntax error. Help with one small JS snippet :(

Hey guys. I don't know much JS, but I wanted to do some quick work with jQuery.
But I've been staring at this for about an hour and I don't understand what I missed:
<script type="text/javascript">
$('#qty_6035').change(function () {
var substractedQty, stockQty, remQty;
substractedQty = (int) $('#qty_6035').val(); // missing ; before statement
stockQty = (int) $('#orig_qty_6035').val();
$('#rem_qty_6035').html(stockQty-substractedQty);
});
</script>
jQuery library is included at the beggining of the document.
Thanks.
Use parseInt function, not (int) casting
Javascript is a dynamic language so in order to convert a string into a number you could use the parseFloat/parseInt functions:
<script type="text/javascript">
$('#qty_6035').change(function () {
var substractedQty = parseFloat($('#qty_6035').val());
var stockQty = parseFloat($('#orig_qty_6035').val());
$('#rem_qty_6035').html(stockQty - substractedQty);
});
</script>
JavaScript is not Java. int is a reserved keyword but doesn't have any functionality assigned to it, and you can't cast a value that way.
You probably want:
substractedQty = parseInt($('#qty_6035').val(), 10);
Javascript doesn't support type casting like strong typed languages (C#, Java) do. To convert the field values (which are strings) to numbers you need to use the global functions parseInt() or parseFloat().
You'll probably also want to make sure the values are parsed correctly, in case a user entered some bad input instead of a number. Use isNAN() for that.

Categories