将 math.round() 添加到用户输入填写的表单中，然后单击按钮查看输出

Question

我已经弄清楚了我的大部分代码，但现在在如何成功验证的语法上（又一次）遇到了问题：

-它只需要允许输入的数字 - 检查有效输入，不允许用户输入会返回 NaN 的值

- 需要四舍五入到整数（即79.8突然变成'80'，41.2变成40后才算出什么等级）

我想可能会使用 math.round，但我已经玩了几个小时了，无法弄清楚我在哪里添加了“math.round”，因为它是一种形式，我很讨厌这个。 :(

<label>Homework Assignments</label>
<input type="number" id="hmwk" size=2 value="hmwk" oninput="validate(this)">
<br>
<label>Midterm Exam</label>
<input type="number" id="mdtm" size=2 value="mdtm" oninput="validate(this)">
<br>
<label>Final Exam</label>
<input type="number" id="final" size=2 value="final" oninput="validate(this)">
<br>
<label>Participation Points</label>
<input type="number" id="prtc" size=2 value="prtc" oninput="validate(this)">
<br>
<br>
<input type="button" value="GPA" onclick="grade()" oninput="validate(this)">
<textarea id="output" style="height: 50px; width: 100%;" disabled></textarea>

<script type="text/javascript">

  function grade() {
var grd1 = parseFloat(document.getElementById('hmwk').value * 0.5);
var grd2 = parseFloat(document.getElementById('mdtm').value * 0.2);
var grd3 = parseFloat(document.getElementById('final').value * 0.2);
var grd4 = parseFloat(document.getElementById('prtc').value * 0.1);
var total = grd1 + grd2 + grd3 + grd4;
var display = document.getElementById('output');
var msg = '';
var grade = 0;

switch (true) {
    case (total >= 90 && total <= 100):
        grade = "you got an A, wow I'm impressed!";
        break;
    case (total >= 80 && total <= 89):
        grade = "you got a B- pretty darn good!";
        break;
    case (total >= 70 && total <= 79):
        grade = "you got a C... but an A for effort!";
        break;
    case (total >= 60 && total <= 69):
        grade = "unfortunately you got a D and you have to retake the course.";
        break;
    case (total >= 0 && total <= 59):
        grade = "F.\r\nSorry you have to retake this course, try studying more next time.";
        break;
    default:
        grade = "F";
        break;
}

msg = "Your grade point average is " + total + " percent, which means you get an " + grade;
display.innerHTML = 'Your Final Grade Is: ' + total + "\r\n" + msg;
  }
</script>

当用户在每个空白处输入他们的成绩时，我不希望文本字段表单框允许他们输入超过 2 个数字或 2 个带两位小数的数字。他们可以输入的示例：

23.56（两个数字，另外两个用小数分隔）

或

87.9（两个数字，带小数分隔符和另一个数字）

或

90

或

100（最大）

不允许：

995（没有小数的三位数字通过 100% 总数，因为这是一个等级）

76.999

或

86.433254647447474（总体而言，有太多数字超过小数点）

101（不允许超过 100）

或

任何字母

或

小数以外的任何字符

Answer 1

通常，当期望一个小数点为 x 的数字时，您可以乘以 10 的因数并四舍五入以修剪任何尾随数字。

这样比较容易，因为您不必在比较时处理浮点数。

注意：我已将您的 oninput 事件更改为 onchange，这将在更改输入后触发

function grade() {
    var grd1 = parseFloat(document.getElementById('hmwk').value * 0.5),
        grd2 = parseFloat(document.getElementById('mdtm').value * 0.2),
        grd3 = parseFloat(document.getElementById('final').value * 0.2),
        grd4 = parseFloat(document.getElementById('prtc').value * 0.1),
        total = grd1 + grd2 + grd3 + grd4,
        display = document.getElementById('output'),
        msg = '',
        grade = 0;
        
    // round the total to 2 dp
    total = Math.round(total * 100) / 100;

    switch (true) {
        case (total >= 90 && total <= 100):
            grade = "you got an A, wow I'm impressed!";
            break;
            
        case (total >= 80 && total <= 89):
            grade = "you got a B- pretty darn good!";
            break;
            
        case (total >= 70 && total <= 79):
            grade = "you got a C... but an A for effort!";
            break;
            
        case (total >= 60 && total <= 69):
            grade = "unfortunately you got a D and you have to retake the course.";
            break;
            
        case (total >= 0 && total <= 59):
            grade = "F.\r\nSorry you have to retake this course, try studying more next time.";
            break;
            
        default:
            grade = "F";
            break;
    }

    msg = "Your grade point average is " + total + " percent, which means you get an " + grade;
    display.innerHTML = 'Your Final Grade Is: ' + total + "\r\n" + msg;
}

function validate(ele){
  // times by 100 then round to 2dp to trim any trailing numbers
  // e.g. 24.696 => 2470
  var val = Math.round(ele.value * 100);
  
  // check if bad input or less than 0
  if(isNaN(val) || val < 0){
    ele.value = "0";
    return;
  }
  
  // divide by 100 to return to a number with up to 2dp
  // e.g. 2470 => 24.7
  val = val / 100;
   
  // check if greater than 100
  if(val > 100){
    ele.value = "100";
    return;
  }
  
  ele.value = val;
}

<form>
  <label>Homework Assignments</label>
  <input type="number" id="hmwk" size=2 value="hmwk" onchange="validate(this)">
  <br>
  <label>Midterm Exam</label>
  <input type="number" id="mdtm" size=2 value="mdtm" onchange="validate(this)">
  <br>
  <label>Final Exam</label>
  <input type="number" id="final" size=2 value="final" onchange="validate(this)">
  <br>
  <label>Participation Points</label>
  <input type="number" id="prtc" size=2 value="prtc" onchange="validate(this)">
  <br>
  <br>
  <input type="button" value="GPA" onclick="grade()" onchange="validate(this)">
  <textarea id="output" style="height: 50px; width: 100%;" disabled></textarea>
</form>

Answer 2

您可以使用 step 并定义任何输入类型的范围，如下所示

 <input id="" name="" type="number" min="0.00" max="100.00" placeholder="85.00" class="" step="1.00">