如何在 JQuery 中实现多个 if/else 语句？

Question

I try to implement a multiple “if - else” statements in a JQuery code. It is about calculating an exam marks and divide the results into groups. There is obviously a mistake in the second function (the first one alone works just fine), but I could find it :( maybe I use wrong the “if - else” function.

Thank you for the help in advance.

HTML

<input id="input0a" class="gender" type="radio" name="gender" value="2.5" onClick="document.getElementById('input0').value=this.value">
<label for="input0a">female</label>
<input type="radio" name="gender" id="input0b" class="gender" value="1" onClick="document.getElementById('input0').value=this.value">
<label for="inputb">male</label>
<br />
<input id="input0" type="text" name="Coeficient Gender" readonly="true" placeholder="Coeficient Gender" readonly="true" />
<label for="input0"> Coeficient Gender </label>
<br />
<input id="input1" type="number" name="input" placeholder="input for calc" />
<label for="input1">Exam total points</label>
<br />
<input id="res1" type="text" name="res absoluto" readonly="true" placeholder="res1" />
<label for="res1">Grade</label>
<br />
<input id="res2" type="text" name="res groupo" readonly="true" placeholder="res2">
<label for="res2">Group</label> 

JQuery

//get GFR PostOp 
function getGrade() {
  var kG = parseFloat($("#input0").val());
  var preCalc = parseFloat($("#input1").val());
  var Calc = kG * preCalc;
  var CalcReady = Calc.toFixed(2);
  if (isNaN(CalcReady)) CalcReady = 0;
  $('#res1').val((CalcReady));
}

$(document).ready(function() {
  $('#input1').keyup(function(event) {
    getGrade();
  });
});

//get Grade Group
function getGroup() {
  var gradeGroup = parseFloat($("#res1").val());
  if (gradeGroup >= 90) {
    var Group = 1;
  } else if (gradeGroup < 90 && gradeGroup >= 60) {
    var Group = 2;
  } else if (gradeGroup < 60 && gradeGroup >= 45) {
    var Group = 3 A;
  } else if (gradeGroup < 45 && gradeGroup >= 30) {
    var Group = 3 B;
  } else if (gradeGroup < 30 && gradeGroup >= 15) {
    var Group = 4;
  } else {
    var Group = 5;
  };
}

if (isNaN(Group)) Group = 0;
$('#res2').val((Group));

$(document).ready(function) {
$('#input1').keyup(function(event) {
  getGroup();
});
});

Answer 1

It looks like you had several small syntax errors throughout the javascript code. I cannot really name them all, but here is the code without errors:

I formatted the javascript with indenting as well, which help a great deal in avoiding small syntax errors like these ones. The code seems to work now just by playing with the snippet html form.

Run the snippet below:

 //get GFR PostOp function getGrade () { var kG = parseFloat($("#input0").val()); var preCalc = parseFloat($("#input1").val()); var Calc = kG * preCalc; var CalcReady = Calc.toFixed(2); if (isNaN(CalcReady)){ CalcReady = 0; } $('#res1').val((CalcReady)); } $(document).ready(function() { $('#input1').keyup(function(event) { getGrade(); }); }); //get Grade Group function getGroup () { var gradeGroup = parseFloat($("#res1").val()); if (gradeGroup >= 90){ var Group = 1; } else if (gradeGroup <90 && gradeGroup >= 60){ var Group = 2; } else if (gradeGroup <60 && gradeGroup >= 45){ var Group = 3; } else if (gradeGroup <45 && gradeGroup >= 30){ var Group = 3; } else if (gradeGroup <30 && gradeGroup >= 15){ var Group = 4; } else { var Group = 5; } if (isNaN(Group)){ Group = 0; } $('#res2').val((Group)); } $(function () { $('#input1').keyup(function(event){ getGroup(); }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input id="input0a" class="gender" type="radio" name="gender" value="2.5" onClick="document.getElementById('input0').value=this.value"> <label for="input0a">female</label> <input type="radio" name="gender" id="input0b" class="gender" value="1" onClick="document.getElementById('input0').value=this.value"> <label for="inputb">male</label> <br /> <input id="input0" type="text" name="Coeficient Gender" readonly="true" placeholder="Coeficient Gender" readonly="true" /> <label for="input0"> Coeficient Gender </label> <br /> <input id="input1" type="number" name="input" placeholder="input for calc"/> <label for="input1">Exam total points</label> <br /> <input id="res1" type="text" name="res absoluto" readonly="true" placeholder="res1"/> <label for="res1">Grade</label> <br /> <input id="res2" type="text" name="res groupo" readonly="true" placeholder="res2"> <label for="res2">Group</label>

Answer 2

I think this is what you are looking for

 //get GFR PostOp function getGrade() { var kG = parseFloat($("#input0").val()); var preCalc = parseFloat($("#input1").val()); var Calc = kG * preCalc; var CalcReady = Calc.toFixed(2); if (isNaN(CalcReady)) CalcReady = 0; $('#res1').val((CalcReady)); } $(document).ready(function() { $('#input1').keyup(function(event) { getGrade(); getGroup(); }); }); //get Grade Group function getGroup() { var Group = '0'; var gradeGroup = parseFloat($("#res1").val()); if (gradeGroup >= 90) { var Group = '1'; } else if (gradeGroup < 90 && gradeGroup >= 60) { var Group = '2'; } else if (gradeGroup < 60 && gradeGroup >= 45) { var Group = '3 A'; } else if (gradeGroup < 45 && gradeGroup >= 30) { var Group = '3 B'; } else if (gradeGroup < 30 && gradeGroup >= 15) { var Group = '4'; } else { var Group = '5'; } $('#res2').val((Group)); }

 <html> <head> <meta charset="utf-8"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> </head> <body> <input id="input0a" class="gender" type="radio" name="gender" value="2.5" onClick="document.getElementById('input0').value=this.value"> <label for="input0a">female</label> <input type="radio" name="gender" id="input0b" class="gender" value="1" onClick="document.getElementById('input0').value=this.value"> <label for="inputb">male</label> <br /> <input id="input0" type="text" name="Coeficient Gender" readonly="true" placeholder="Coeficient Gender" readonly="true" /> <label for="input0"> Coeficient Gender </label> <br /> <input id="input1" type="number" name="input" placeholder="input for calc" /> <label for="input1">Exam total points</label> <br /> <input id="res1" type="text" name="res absoluto" readonly="true" placeholder="res1" /> <label for="res1">Grade</label> <br /> <input id="res2" type="text" name="res groupo" readonly="true" placeholder="res2"> <label for="res2">Group</label> </body> </html>