# Arithmetic operations in HTML with JS functions

Page 1 of 1

## 5 Replies - 955 Views - Last Post: 16 February 2014 - 08:55 PM

### #1 NotoriousArab

• New D.I.C Head

Reputation: 0
• Posts: 28
• Joined: 03-September 13

# Arithmetic operations in HTML with JS functions

Posted 16 February 2014 - 04:19 PM

I have a function here that takes in 3 inputs and does the following:

```
function getResult(totalCost, amount, remain)
{

alert(getRemainder());
var check = validityCheck();
amount = amount + remain;
calc = totalCost / amount;
if(check)
{
var oldResult = document.getElementById("result").innerHTML;
document.getElementById("result").innerHTML = "You need to sell " + amount + " BTC at " + calc;
}
else
{
oldResult = document.getElementById("result").innerHTML;
document.getElementById("result").innerHTML = "Validity failed. Try again.";
}

}

```

For the sake of an example, let's say total cost is "10,000", amount is 18, and remain is 0.
The output of this function with the input above is "You need to sell 180 BTC at 55.55555555555556"

For some reason, JS adds the remain variable as a string to the original amount. So it outputs "180" instead of "18". Yet it does the arithmetic operation for
```calc = totalCost / amount;
```
.

I cant seem to figure out why it does this.

Is This A Good Question/Topic? 0

## Replies To: Arithmetic operations in HTML with JS functions

### #2 JMRKER

• D.I.C Addict

Reputation: 133
• Posts: 868
• Joined: 25-October 08

## Re: Arithmetic operations in HTML with JS functions

Posted 16 February 2014 - 04:44 PM

How does it work without the functions that you did not provide?

```<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />

<title> Untitled </title>

</head>
<body>
<div id="result"></div>

<script type="text/javascript">
function getResult(totalCost, amount, remain) {
//        alert(getRemainder());                // function not provided
//        var check = validityCheck();          // function not provided
var check = true;  if (Number(amount) == 0) { check = false; }

amount = amount + remain;
calc = totalCost / amount;
if(check) {
var oldResult = document.getElementById("result").innerHTML;
document.getElementById("result").innerHTML = "You need to sell " + amount + " BTC at " + calc;
} else {
oldResult = document.getElementById("result").innerHTML;
document.getElementById("result").innerHTML = "Validity failed. Try again.";
}
}

getResult(10000, 18, 0)
</script>

</body>
</html>

```

And why have 'oldResult' if you never use it?
Plus it is local in one branch of the IF statement and global in the other. Why?

This post has been edited by JMRKER: 16 February 2014 - 04:47 PM

Was This Post Helpful? 0

### #3 NotoriousArab

• New D.I.C Head

Reputation: 0
• Posts: 28
• Joined: 03-September 13

## Re: Arithmetic operations in HTML with JS functions

Posted 16 February 2014 - 06:07 PM

I didn't think it was relevant to post since the problem is with that function. However I'll post it when I get home.
Was This Post Helpful? 0

### #4 Atli

• Enhance Your Calm

Reputation: 4013
• Posts: 6,800
• Joined: 08-June 10

## Re: Arithmetic operations in HTML with JS functions

Posted 16 February 2014 - 06:37 PM

NotoriousArab, on 16 February 2014 - 11:19 PM, said:

For some reason, JS adds the remain variable as a string to the original amount. So it outputs "180" instead of "18". Yet it does the arithmetic operation for
```calc = totalCost / amount;
```
.

Javascript uses the + operator for both numeric addition and string concatenation. If either of the variables is a string - such as those that the "value" property of a <input> element will always give you - it will do the latter, converting the other to a string if necessary. If you want to ensure that it does an addition, then you must ensure that both variables are really Numbers.

To do that, look at the parseInt and/or parseFloat functions.

To "properly" ensure this, you'd have to do something along the lines of:
```if (typeof inputValue != "number") {
inputValue = parseFloat(inputValue);
if (isNaN(inputValue)) {
throw new Error("Input value is not a number.");
}
}

```

Was This Post Helpful? 1

### #5 JMRKER

• D.I.C Addict

Reputation: 133
• Posts: 868
• Joined: 25-October 08

## Re: Arithmetic operations in HTML with JS functions

Posted 16 February 2014 - 07:06 PM

NotoriousArab, on 16 February 2014 - 06:07 PM, said:

I didn't think it was relevant to post since the problem is with that function. However I'll post it when I get home.

ANY error will cause the JS to stop executing.
Without the missing functions, the error(s) occur immediately with the function call.
Makes it difficult to see the error you were trying to solve and therefore to test/correct.

Note also that Number(), parseInt() and parseFloat() are all possible candidates to the validation checks.

This post has been edited by JMRKER: 16 February 2014 - 07:08 PM

Was This Post Helpful? 1

### #6 NotoriousArab

• New D.I.C Head

Reputation: 0
• Posts: 28
• Joined: 03-September 13

## Re: Arithmetic operations in HTML with JS functions

Posted 16 February 2014 - 08:55 PM

Fixed my issue with the Number() function. I posted it below for those who are curious. It's obviously not complete. Thanks to all who helped.

```<!DOCTYPE html>
<html>
<head>
<title>BTC Break Even Calculator</title>
<link type="text/css" rel="stylesheet" href="Stylesheet.css"/>

</head>
<body>
<h1>BTC Break Even Calculator</h1>

<fieldset>
<form id="forms">
Buy: <label for="buy1"></label><input onsubmit="getFirstAmount()" type="text" id="buy1"><br>

Cost: <label for="cost"></label><input onsubmit="getFirstCost()" type="text" id="cost"><br>

Sell: <label for="sell"></label><input onsubmit="getFirstSellAmount()" type="text" id="sell"><br>

Price: <label for="price"></label><input onsubmit="getFirstSellPrice()" type="text" id="price"><br>

Buy: <label for="buy2"></label><input onsubmit="getSecondAmount()" type="text" id="buy2"><br>

Cost: <label for="cost2"></label><input onsubmit="getSecondCost()" type="text" id="cost2"><br>

<input name="Submit" type="button" value="Submit" onclick="getResult((getFirstAmount() * getFirstCost()), getSecondAmount(), getRemainder())"/>
</form>

</fieldset>

<p id="result"></p>
<p id="error"></p>
<p id="remainder"></p>

<script type="text/javascript">

function getFirstAmount()
{
var variable = document.getElementById("buy1").value;
return Number(variable);
}
function getFirstCost()
{
var variable = document.getElementById("cost").value;
return Number(variable);
}
function getFirstSellAmount()
{
var variable = document.getElementById("sell").value;
return Number(variable);
}
function getFirstSellPrice()
{
var variable = document.getElementById("price").value;
return Number(variable);
}
function getSecondAmount()
{
var variable = document.getElementById("buy2").value;
return Number(variable);
}
function getSecondCost()
{
var variable = document.getElementById("cost2").value;
return Number(variable);
}

//----------------------------------------------------------------------------------------------

function validityCheck()
{
if(getFirstAmount() < getFirstSellAmount())
{
var oldError = document.getElementById("error").innerHTML;
document.getElementById("error").innerHTML = "You cannot sell more BTC than you own.";
return false;
}
else
{
return true;
}
}
function getRemainder()
{
return Math.abs(getFirstAmount() - getFirstSellAmount());
}

//----------------------------------------------------------------------------------------------

function getResult(totalCost, amount, remain)
{
var check = validityCheck();
amount = amount + remain;
var finalPrice = totalCost / amount;
if(check)
{
var oldResult = document.getElementById("result").innerHTML;
document.getElementById("result").innerHTML = "You need to sell " + amount + " BTC at " + finalPrice;
}
else
{
oldResult = document.getElementById("result").innerHTML;
document.getElementById("result").innerHTML = "Validity failed. Try again.";
}

}
</script>

</body>
</html>
```

Was This Post Helpful? 0

Page 1 of 1

 .related ul{list-style-type:circle;font-size:12px;font-weight:bold;}.related li{margin-bottom:5px;background-position:left 7px!important;margin-left:-35px;}.related h2{font-size:18px;font-weight:bold;}.related a{color:blue;}