javascript - 将答案四舍五入到小数位

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>

我使用上面的方法根据人们的输入 X 和 Y 进行计算...

我得到了想要的答案，但是给出了一长串小数位。

我正在寻找一种方法，将每个答案四舍五入到最多 2 位小数。

任何帮助将不胜感激:-)

Answer 1

Math.ceil() 将向上舍入，Math.floor() 将向下舍入到最接近的整数。

您需要将答案增加 100 倍以进行四舍五入，然后将其除以 100 以返回到小数。

此外，您的代码中有很多内容不遵循现代的最佳实践和标准，并且您的 if 逻辑也存在一些问题。

有关详细信息，请参阅内嵌评论:

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>