html - Grading system in Javascript

Can anyone please help me in this problem.

Write a program that takes input from user to read roll no and marks of 5 subjects and calculate the total and Average of the marks. Making sure that each subject marks are not greater than 100. Then making grading system. You have to calculate grade on the basis of average.

You have to print the grade according to the following criteria:

If average is greater than 80 and less than 100, Grade is A

If average is greater than 75 and less than 80, Grade is B

HERE IS MY CODE: How can I include conditions in this code.

function grading() {
    var val1 = parseInt(document.getElementById("num1").value);
    var val2 = parseInt(document.getElementById("num2").value);
    var val3 = parseInt(document.getElementById("num3").value);
    var val4 = parseInt(document.getElementById("num4").value);

    var final = val1 + val2 + val3 + val4;
    document.getElementById("result").innerHTML = +final  + " / 400 ";
}

function average() {
    var val1 = parseInt(document.getElementById("num1").value);
    var val2 = parseInt(document.getElementById("num2").value);
    var val3 = parseInt(document.getElementById("num3").value);
    var val4 = parseInt(document.getElementById("num4").value);

    var final1 = val1 + val2 + val3 + val4; 
    var total = final1 / 4;
    document.getElementById("avrg").innerHTML = +total;
}

HTML Code :

 <body>
     <label>English</label>
     <input type="text" id="num1"><br>
     <label>English</label>
     <input type="text" id="num2"><br>
     <label>English</label>
     <input type="text" id="num3"><br>
     <label>English</label>
     <input type="text" id="num4"><br>
     <button onClick="grading()">Total</button>
     <p id="result"></p><br>
     <button onClick="average()">Average</button><br>
     <p id="avrg"></p>
     <button onClick="system()">Grade</button><br>
     <p id="grad"></p>
</body>

Can anyone please help me in this problem.

You have to print the grade according to the following criteria:

If average is greater than 80 and less than 100, Grade is A

If average is greater than 75 and less than 80, Grade is B

HERE IS MY CODE: How can I include conditions in this code.

function grading() {
    var val1 = parseInt(document.getElementById("num1").value);
    var val2 = parseInt(document.getElementById("num2").value);
    var val3 = parseInt(document.getElementById("num3").value);
    var val4 = parseInt(document.getElementById("num4").value);

    var final = val1 + val2 + val3 + val4;
    document.getElementById("result").innerHTML = +final  + " / 400 ";
}

function average() {
    var val1 = parseInt(document.getElementById("num1").value);
    var val2 = parseInt(document.getElementById("num2").value);
    var val3 = parseInt(document.getElementById("num3").value);
    var val4 = parseInt(document.getElementById("num4").value);

    var final1 = val1 + val2 + val3 + val4; 
    var total = final1 / 4;
    document.getElementById("avrg").innerHTML = +total;
}

HTML Code :

 <body>
     <label>English</label>
     <input type="text" id="num1"><br>
     <label>English</label>
     <input type="text" id="num2"><br>
     <label>English</label>
     <input type="text" id="num3"><br>
     <label>English</label>
     <input type="text" id="num4"><br>
     <button onClick="grading()">Total</button>
     <p id="result"></p><br>
     <button onClick="average()">Average</button><br>
     <p id="avrg"></p>
     <button onClick="system()">Grade</button><br>
     <p id="grad"></p>
</body>

Share Improve this question edited Nov 29, 2018 at 6:49 Varghese Mathai 4113 silver badges11 bronze badges asked Nov 29, 2018 at 6:31 B.Amjad 151 gold badge1 silver badge3 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

You have to create the function to show the final grade. Declare the variable total so that you can check that inside the function to show the expected grade.

Condition for the range 80 to 100 - Grade A

if(total >= 80 && total <= 100)

Condition for the range 75 to 79 - Grade B

else if(total >= 75 && total < 80)

Please Note: I have change the function name from system to gradeFinal which is more meaningful. I will also suggest you to use textContent instead of innerHTML which is more faster and predictable.

You can try the following way:

function grading(){
  var val1 = parseInt(document.getElementById("num1").value);
  var val2 = parseInt(document.getElementById("num2").value);
  var val3 = parseInt(document.getElementById("num3").value);
  var val4 = parseInt(document.getElementById("num4").value);

  var final = val1 + val2 + val3 + val4;
  document.getElementById("result").textContent = +final  + " / 400 ";
}


var total;
function average(){
  var val1 = parseInt(document.getElementById("num1").value);
  var val2 = parseInt(document.getElementById("num2").value);
  var val3 = parseInt(document.getElementById("num3").value);
  var val4 = parseInt(document.getElementById("num4").value);

  var final1 = val1 + val2 + val3 + val4; 
  total = final1 / 4;
  document.getElementById("avrg").textContent = +total;
}

function gradeFinal(){
  if(total >= 80 && total <= 100)
    document.getElementById("grad").textContent = 'A';
  else if(total >= 75 && total < 80)
    document.getElementById("grad").textContent = 'B'
}

document.querySelectorAll('input[type=text]').forEach(function(input){
  input.addEventListener('input',limitRange);
});

function limitRange() {
  if (this.value < 0) this.value = 0;
  if (this.value > 100) this.value = 100;
}

<label>English</label>
<input type="text" id="num1"><br>
<label>English</label>
<input type="text" id="num2"><br>
<label>English</label>
<input type="text" id="num3"><br>
<label>English</label>
<input type="text" id="num4"><br>
<button onClick="grading()">Total</button>
<p id="result"></p><br>
<button onClick="average()">Average</button><br>
<p id="avrg"></p>
<button onClick="gradeFinal()">Grade</button><br>
<p id="grad"></p>

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

html - Grading system in Javascript - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)