javascript - How to implement a multiple ifelse statements in JQuery?

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();
});
});

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();
});
});

Share Improve this question edited Oct 27, 2017 at 20:58 ferhado 2,6042 gold badges16 silver badges37 bronze badges asked Oct 27, 2017 at 19:24 pap 1331 gold badge3 silver badges14 bronze badges

1 var Group = 3B; and similar lines are not valid JavaScript. – Phix Commented Oct 27, 2017 at 19:29
@Phix what should I wright then? I tried also with $(“#res2”).val((3B)); but it didn’t worked either... – pap Commented Oct 27, 2017 at 19:31
3B is not a number, your code is using it like it is. Do you want #res2's value to be the string "3B"? – Max Commented Oct 27, 2017 at 19:34
3B is not valid javascript. When you assign to a variable it must be one of the valid types, i.e. a string, number, object etc. I suggest a brush up of the JavaScript language. tutorialspoint./javascript/javascript_variables.htm – Phix Commented Oct 27, 2017 at 19:35
@Max yes. I need a strong, not a number. – pap Commented Oct 27, 2017 at 20:08

Add a ment |

2 Answers 2

Sorted by: Reset to default 4

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./bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
    <script src="https://code.jquery./jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare./ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn./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>

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./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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to implement a multiple ifelse statements in JQuery? - Stack Overflow

2 Answers 2

与本文相关的文章

评论列表(0)