Jump to content
Please Use CODE Tags

help with simple javascript

karwan313
By karwan313
in Programming
 Share
Go to solution Solved by mariushm,

Something like this, with proper rounding to 2 decimals

  

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div data-ng-app="" data-ng-init="Weight=0;  quantity=0; price=0">
<form>
<input id="price" ng-model="price" type="text" placeholder="price">
<br><br>
<input id="Weight" type="text" placeholder="weight">
<br><br>
<input id="quantity" type="text" placeholder="quantity">


<br>
comission <p  id="comm"> </p> 
shipping <p  id="ship"> </p> 
total <p  id="tot"> </p> 



<br><br>


<script type="text/javascript">
function myFunction() {
  var price = parseFloat(document.getElementById("price").value);
  var weight = parseFloat(document.getElementById("Weight").value);
  var qty = parseFloat(document.getElementById("quantity").value);
 
  var comm = 0
  console.log(price, weight, qty)
  if (price <= 100) {
    comm = 3

  } else {
   comm  = 0.035 * price
 
  }
  var ship = 7 * weight
  var tot =  qty * (ship + comm + price)
  console.log(comm, ship, tot)
  var comm_rounded = Math.round(comm*100 + Number.EPSILON)/100
  var total_rounded = Math.round(tot*100 + Number.EPSILON)/100

  document.getElementById("comm").innerHTML = comm_rounded
  document.getElementById("ship").innerHTML = ship;
  document.getElementById("tot").innerHTML = total_rounded
}

</script>


<button class="btn cyan waves-effect waves-light" onclick="myFunction()">Calculate</button>  
</form>
</body>
</html>

 

If you'll accept weight as floating point and not just multiple of kg, then you may want to round that up as well. And you may want to calculate the total as quantity x ( rounded to 2 decimals for all three)  because otherwise you may have a situation where there's a difference in numbers of a few pennies caused by the rounding at the end.

Posted

hey guys 
im kinda new in java script programming 
im trying to make a special calculator 
every thing works fine bit the total dosent work as it shuld be 
lets say my input price is 100$ and weight is 1kg  quantity is 1  
simply the math is ( quantity * (price + (weight * 7)  ))
it shuld output 107$

but it outputs 1007 
so any help ? 

 

 

 

 here's the code

  


<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div data-ng-app="" data-ng-init="Weight=0;  quantity=0; price=0">
<input id="price" ng-model="price" type="text">
<br><br>
<input id="Weight" type="text">
<br><br>
<input id="quantity" type="text">


<br>
comition <p  id="comm"> </p> 
shipping <p  id="ship"> </p> 
total <p  id="tot"> </p> 



<br><br>


<script type="text/javascript">
function myFunction() {
  var price = document.getElementById("price").value;
  var ship = document.getElementById("Weight").value;
  var qty = document.getElementById("quantity").value;
  var tot;
  
  if (price <= 100) {
    comm = 3;

  } else {
   comm  = (0.035* price ) ;
 
  }
  $ship = (7 * ship);
  $tot = ( qty * (ship + comm + price));
  document.getElementById("comm").innerHTML = comm;
  document.getElementById("ship").innerHTML = $ship;
  document.getElementById("tot").innerHTML = $tot;
}

</script>


<button class="btn cyan waves-effect waves-light" onclick="myFunction()">Calculate</button>  
</body>
</html>

 

Capture.PNG

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Try changing these lines: 

var price = document.getElementById("price").value;
var ship = document.getElementById("Weight").value;
var qty = document.getElementById("quantity").value;

To this: 

var price = +document.getElementById("price").value;
var ship = +document.getElementById("Weight").value;
var qty = +document.getElementById("quantity").value;

this makes sure the value is interpreted as a number, while I think at the moment it's interpreted as text.

 

This is why we need strongly typed languages

"We're all in this together, might as well be friends" Tom, Toonami.

 

mini eLiXiVy: my open source 65% mechanical PCB, a build log, PCB anatomy and discussing open source licenses: https://linustechtips.com/topic/1366493-elixivy-a-65-mechanical-keyboard-build-log-pcb-anatomy-and-how-i-open-sourced-this-project/

 

mini_cardboard: a 4% keyboard build log and how keyboards work: https://linustechtips.com/topic/1328547-mini_cardboard-a-4-keyboard-build-log-and-how-keyboards-work/

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
2 hours ago, minibois said:

Try changing these lines: 


var price = document.getElementById("price").value;
var ship = document.getElementById("Weight").value;
var qty = document.getElementById("quantity").value;

To this: 


var price = +document.getElementById("price").value;
var ship = +document.getElementById("Weight").value;
var qty = +document.getElementById("quantity").value;

this makes sure the value is interpreted as a number, while I think at the moment it's interpreted as text.

 

This is why we need strongly typed languages

I would use parseInt or parse Float. Though +'123' is nice it not nearly as easy to understand as parseInt('123')

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution

Something like this, with proper rounding to 2 decimals

  

<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div data-ng-app="" data-ng-init="Weight=0;  quantity=0; price=0">
<form>
<input id="price" ng-model="price" type="text" placeholder="price">
<br><br>
<input id="Weight" type="text" placeholder="weight">
<br><br>
<input id="quantity" type="text" placeholder="quantity">


<br>
comission <p  id="comm"> </p> 
shipping <p  id="ship"> </p> 
total <p  id="tot"> </p> 



<br><br>


<script type="text/javascript">
function myFunction() {
  var price = parseFloat(document.getElementById("price").value);
  var weight = parseFloat(document.getElementById("Weight").value);
  var qty = parseFloat(document.getElementById("quantity").value);
 
  var comm = 0
  console.log(price, weight, qty)
  if (price <= 100) {
    comm = 3

  } else {
   comm  = 0.035 * price
 
  }
  var ship = 7 * weight
  var tot =  qty * (ship + comm + price)
  console.log(comm, ship, tot)
  var comm_rounded = Math.round(comm*100 + Number.EPSILON)/100
  var total_rounded = Math.round(tot*100 + Number.EPSILON)/100

  document.getElementById("comm").innerHTML = comm_rounded
  document.getElementById("ship").innerHTML = ship;
  document.getElementById("tot").innerHTML = total_rounded
}

</script>


<button class="btn cyan waves-effect waves-light" onclick="myFunction()">Calculate</button>  
</form>
</body>
</html>

 

If you'll accept weight as floating point and not just multiple of kg, then you may want to round that up as well. And you may want to calculate the total as quantity x ( rounded to 2 decimals for all three)  because otherwise you may have a situation where there's a difference in numbers of a few pennies caused by the rounding at the end.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

Yup, the idea behind obtaining values from a html document, you have to parse to the data type you want to handle. As you can see they parseInt or parseFloat before using the formula to calculate the result.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

in addition to all said above, I suggest to get to know jQuery, it will simplify a lot of things and you will write less code. and using an external file to make things cleaner and more efficient for you

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
On 11/12/2020 at 3:12 AM, mariushm said:

Something like this, with proper rounding to 2 decimals

  


<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>

<div data-ng-app="" data-ng-init="Weight=0;  quantity=0; price=0">
<form>
<input id="price" ng-model="price" type="text" placeholder="price">
<br><br>
<input id="Weight" type="text" placeholder="weight">
<br><br>
<input id="quantity" type="text" placeholder="quantity">


<br>
comission <p  id="comm"> </p> 
shipping <p  id="ship"> </p> 
total <p  id="tot"> </p> 



<br><br>


<script type="text/javascript">
function myFunction() {
  var price = parseFloat(document.getElementById("price").value);
  var weight = parseFloat(document.getElementById("Weight").value);
  var qty = parseFloat(document.getElementById("quantity").value);
 
  var comm = 0
  console.log(price, weight, qty)
  if (price <= 100) {
    comm = 3

  } else {
   comm  = 0.035 * price
 
  }
  var ship = 7 * weight
  var tot =  qty * (ship + comm + price)
  console.log(comm, ship, tot)
  var comm_rounded = Math.round(comm*100 + Number.EPSILON)/100
  var total_rounded = Math.round(tot*100 + Number.EPSILON)/100

  document.getElementById("comm").innerHTML = comm_rounded
  document.getElementById("ship").innerHTML = ship;
  document.getElementById("tot").innerHTML = total_rounded
}

</script>


<button class="btn cyan waves-effect waves-light" onclick="myFunction()">Calculate</button>  
</form>
</body>
</html>

 

If you'll accept weight as floating point and not just multiple of kg, then you may want to round that up as well. And you may want to calculate the total as quantity x ( rounded to 2 decimals for all three)  because otherwise you may have a situation where there's a difference in numbers of a few pennies caused by the rounding at the end.

thanx soo much man that worked perfectly 

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×