rounding answers to decimal places

Question

<script language="JavaScript">
<!--
function calculate() {
var x= document.Form.x.value
var y = document.Form.y.value
if(x> 0 && y> 0){   
var final = x/(y/100*y/100)
document.Form.answer.value = final
if(final < a){
document.Form.meaning.value = "A"
}
if(final > a && final < b){
document.Form.meaning.value = "B"
}
if(final > b && final < c){
document.Form.meaning.value = "C"
}
if(final > d){
document.Form.meaning.value = "D"
}
}
else{
alert("Please Fill form in correctly")
}
}
//-->
</script>

<div class=form2>
<form name="Form">
x: <input type="text" name="x" size="10"><br />
y: <input type="text" name="y" size="10"><br />
<input type="button" value="Calculate" onClick="calculate()"><br />
Answer: <input type="text" name="answer" size="10"><br />
This Means: <input type="text" name="meaning" size="25"><br />
<input type="reset" value="Reset" />
</form>
</div>

I am using the above to calculate based on peoples inputs X and Y...

I am getting the desired answers however is giving a long list of decimal places.

I am looking for a way to round each answer up to a max of 2 decimal places.

Any help would be much appreciated :-)

I marked this question in PHP as I was putting the code into calculator.php script — PaulMcF87, Jul 24 '17 at 10:21
Tags are used to show where the question belongs. This is not a php question. Use the tags where the problem is. Not all tags that can use. Excessive tag usage usually leads to questions put on hold or being deleted. — Andreas, Jul 24 '17 at 10:54

Scott Marcus · Accepted Answer · 2017-07-23T16:58:13.953

Math.ceil() will round up and Math.floor() will round down to the nearest whole number.

You'll need to bump up the answer by a factor of 100 to do the rounding and then divide it back by 100 to go back to decimals.

Also, there was a lot about your code that does not follow modern, best-practices and standards as well as some problems with your if logic.

See the comments inline for details:

window.addEventListener("DOMContentLoaded", function(){

  // Always get references to the elelements themselves, not property values.
  // That way, if you decide you need to access another property somewhere else
  // you don't have to re-scan the DOM for the same element. Also, access elements
  // using modern standards.
  var x= document.querySelector("input[name='x']");
  var y= document.querySelector("input[name='y']");
  var ans= document.getElementById("answer");
  var m = document.getElementById("meaning");
  var btn = document.getElementById("calc");
  
  // Set up button click event handler here, in the JavaScript, not in the HTML
  btn.addEventListener("click", calculate);

  function calculate() {
  
    // Next, always trim off any possible leading or trailing spaces from user input
    var xVal = x.value.trim();
    var yVal = y.value.trim();
  
    if(xVal > 0 && yVal > 0){   
  
      var final = xVal/(yVal/100*yVal/100);
      console.log("Answer = " + final);
    
      // First, multiply answer by 100
      final = final * 100;
      console.log("Answer times 100 = " + final);
  
      // Next, round answer up to nearest whole number
      final = Math.ceil(final);
      console.log("Answer times 100, rounded up to nearest whole number = " + final);
  
      // Now, divide by 100 to go back to decimals
      final = final / 100;
      console.log("Answer divided back by 100 = " + final);

      ans.textContent = final;
      
      // These should be else if, not one if after another since only
      // one of the conditions will be true.
      if(final < a){
        m.textContent = "A"
      } else if(final > a && final < b){
        m.textContent = "B"
      } else if(final > b && final < c){
        m.textContent = "C"
      } else if(final > d){
        m.textContent = "D"
      }
    } else{
      alert("Please Fill form in correctly")
    }
  }
});

.left { 
  float:left;
  width:100px; 
}

.results {
  margin-top:1em;
}

.after {
  clear:both;
  margin-top:2em;
}

<div class=form2>
 <form name="Form">
   <!-- The text that accompanies the fields should be <label> elements
        for better accessibility and for easier styling.   -->
   <label for="x" class="left">x: </label><input type="text" name="x" id="x" size="10"><br>
   <label for="y" class="left">y: </label><input type="text" name="y" id="y" size="10">
   
   <!-- Don't use inline HTML event handling attributes.
        Do you JavaScript separately. -->
   <div><input type="button" value="Calculate" id="calc"></div>
   
   <!-- Don't use form fields for displaying data. -->
   <div class="results">
     <span class="left">Answer: </span><span id="answer"></span><br>
     <span class="left">This Means: </span><span id="meaning"></span>
   </div>
   <div class="after">
     <input type="reset" value="Reset">
   </div>
</form>
</div>

Thanks a lot for your help. This is excellemt – PaulMcF87 Jul 23 '17 at 19:51 — PaulMcF87, Jul 23 '17 at 19:51

score 0 · Answer 2 · answered Jul 23 '17 at 16:24

Use toFixed() function to round. Ex : final.toFixed(2);

<script language="JavaScript">
<!--
function calculate() {
var x= document.Form.x.value
var y = document.Form.y.value
if(x> 0 && y> 0){   
var final = x/(y/100*y/100)
document.Form.answer.value = final.toFixed(2);
if(final < a){
document.Form.meaning.value = "A"
}
if(final > a && final < b){
document.Form.meaning.value = "B"
}
if(final > b && final < c){
document.Form.meaning.value = "C"
}
if(final > d){
document.Form.meaning.value = "D"
}
}
else{
alert("Please Fill form in correctly")
}
}
//-->
</script>

<div class=form2>
<form name="Form">
x: <input type="text" name="x" size="10"><br />
y: <input type="text" name="y" size="10"><br />
<input type="button" value="Calculate" onClick="calculate()"><br />
Answer: <input type="text" name="answer" size="10"><br />
This Means: <input type="text" name="meaning" size="25"><br />
<input type="reset" value="Reset" />
</form>
</div>

rounding answers to decimal places

2 Answers2

Linked